在三星智能电视中滚动答案

【问题标题】：Scroll in samsung Smart TV在三星智能电视中滚动
【发布时间】：2015-04-28 03:47:04
【问题描述】：

我有文章要在智能电视应用程序中显示（编码 JavaScript），但不幸的是，它只显示前几次，而其余的都隐藏起来。有什么办法可以在三星智能电视中滚动？

【问题讨论】：

您能否提供一个显示问题的代码小示例？或许还有结果的屏幕截图或照片？
有没有办法模拟你的环境？你能发布一些你对这个问题所做的代码和研究吗？您是否看到任何 javascript 错误？
我无法添加图片因为我需要 10 声望！！！！！！ :( 无论如何，我将尝试解释.. 假设我有 50 篇文章的列表要显示，但由于我们无法在智能电视上滚动视图，我只能显示 4 或 5 篇文章.. 其余的仍然隐藏。我需要一个 API 可能用于在智能电视上滚动
您可以使用免费的图片上传网站并在此处发布直接链接。
你是用div来展示数据吗

标签： javascript scroll television

【解决方案1】：

如果您使用 div 或列表来显示数据，那么您可以在按键时使用 jquery 轻松隐藏列表或 Div。

【讨论】：

【解决方案2】：

scrollBy 和 scrollTo 在三星智能电视上工作正常（不是在 lg 上）。您没有很好地描述您的问题，但我想您只需要将向上/向下键绑定到其中一个滚动 API。

我建议使用isscrolljs 而不是使用scrollBy 和scrollTo，因为它在三星和LG 上都运行良好。 smarttvjs 也使用它。

【讨论】：

【解决方案3】：

var widgetAPI = new Common.API.Widget();
var tvKey = new Common.API.TVKeyValue();
var InitH = 440 -10;
var InitTop = 50;
var MaxTop;
var interT = null, interD = null;
var d;
var t;
var prevT = null;
var Main =
{

};

Main.onLoad = function()
{
    // Enable key event processing
    this.enableKeys();
    widgetAPI.sendReadyEvent();
    MaxTop = $("#Content").position().top - (parseInt($("#Content").css("height"))- InitH);
    alert($("#Content").position().top);
    alert(MaxTop);

};

Main.onUnload = function()
{

};

Main.enableKeys = function()
{
    document.getElementById("anchor").focus();
};

Main.keyDown = function()
{
    var keyCode = event.keyCode;
    alert("Key pressed: " + keyCode);

    switch(keyCode)
    {
        case tvKey.KEY_RETURN:
        case tvKey.KEY_PANEL_RETURN:
            alert("RETURN");
            widgetAPI.sendReturnEvent();
            break;
        case tvKey.KEY_LEFT:
            alert("LEFT");
            break;
        case tvKey.KEY_RIGHT:
            alert("RIGHT");
            break;
        case tvKey.KEY_UP:
            alert("UP");
            interTop();
            d = new Date();
            t =parseInt((d.getTime()%10000)/1000);
            alert(t+" ---------" );
            //alert(scroll);
            //Math.abs(t-prevT)>=3 && Math.abs(t-prevT)<=7
            if(($("#Content").position().top<InitTop && t!=prevT) || prevT == null){
            $("#Content").css("top",$("#Content").position().top+50+"px");
            prevT = t;
            }else if($("#Content").position().top>InitTop){
                $("#Content").css("top",InitTop+"px");
            }
            break;
        case tvKey.KEY_DOWN:
            alert("DOWN");
            interDown();
            d = new Date();
            t =parseInt((d.getTime()%10000)/1000);
            alert(t+" ---------" );
            //alert(scroll);
            //Math.abs(t-prevT)>=3 && Math.abs(t-prevT)<=7
            if(($("#Content").position().top>MaxTop && t!=prevT) || prevT == null){
            $("#Content").css("top",$("#Content").position().top-50+"px");
            prevT = t;
            }else if($("#Content").position().top<MaxTop){
                $("#Content").css("top",MaxTop+"px");
            }
            break;
        case tvKey.KEY_ENTER:
        case tvKey.KEY_PANEL_ENTER:
            alert("ENTER");
            alert($("#Content").css("height"));
            alert($("#Content").position().top);
            break;
        default:
            alert("Unhandled key");
            break;
    }
};

function interTop(){
            clearInterval(interD);
            interD = null;
            if(interT == null){
            interT = setInterval(function(){if($("#Content").position().top>InitTop){
                $("#Content").css("top",InitTop+"px");
            }
            },500);
            }
}

function interDown(){
clearInterval(interT);
interT = null;
if(interD == null){
    interD = setInterval(function(){if($("#Content").position().top<MaxTop){
                $("#Content").css("top",MaxTop+"px");
            }
            },500);
            }
}

【讨论】：

【解决方案4】：

  var widgetAPI = new Common.API.Widget();
var tvKey = new Common.API.TVKeyValue();
var total_item = 3, current_item = 0;

//var variable = Document.getElementById("Content");
var Main =
{

};

Main.onLoad = function()
{
    // Enable key event processing
    this.enableKeys();
    widgetAPI.sendReadyEvent();
    navigation("DOWN");

    fetchNews();
    ///////////////////////////////////
        /* L'appel du Parser à compléter */
        /* L'appel du Parser à compléter */
        /* L'appel du Parser à compléter */
        ///////////////////////////////////

};

Main.onUnload = function()
{

};

Main.enableKeys = function()
{
    document.getElementById("anchor").focus();
};

Main.keyDown = function()
{
    var keyCode = event.keyCode;
    alert("Key pressed: " + keyCode);

    switch(keyCode)
    {
        case tvKey.KEY_RETURN:
        case tvKey.KEY_PANEL_RETURN:
            alert("RETURN");
            widgetAPI.blockNavigation(event);
            parent.location = "index.html";
            break;
        case tvKey.KEY_LEFT:
            alert("LEFT");
            break;
        case tvKey.KEY_RIGHT:
            alert("RIGHT");
            break;
        case tvKey.KEY_UP:
            alert("UP");
            //navigation("UP");
            break;
        case tvKey.KEY_DOWN:
            alert("DOWN");
            //navigation("DOWN");
            break;
        case tvKey.KEY_ENTER:
        case tvKey.KEY_PANEL_ENTER:
            alert("ENTER");
            //gotoPage();
            break;
        default:
            alert("Unhandled key");
            break;
    }
};
function navigation(direction){
    $("#btn_"+current_item).removeClass("selected_btn");
    if(direction == "UP"){
        if(current_item == 1)
            current_item = total_item;
        else
            current_item--;

    }else if(direction == "DOWN"){
        if(current_item == total_item)
            current_item = 1;
        else
            current_item++;
    }
    $("#btn_"+current_item).addClass("selected_btn");
}
function gotoPage(){
    switch(current_item){
        //case 1: parent.location = "gallery.html"; break;
        case 2: parent.location = "news.html"; break;
        case 3: parent.location = "about.html"; break;
    }
}
function fetchNews(){

if ( ParserNews.init()) {

       ParserNews.dataReceivedCallback = function() {
        prepareNewsList();
        };

        ParserNews.fetchDatas();

        }

};

function prepareNewsList(){

    var i;
    for(i=0; i<DataNews.getCount(); i++){       

        $("<div/>").addClass("newsItem").html('<div class="title">'+DataNews.getTitle(i)+'</div></br><div><img src ="'+DataNews.getDate(i)+'"></div>').appendTo($("body")); 


    }
    alert(DataNews.getTitle(3)) ;
    alert(DataNews.getMiservices(3))    ;
    alert(DataNews.getCount());

}



// This is the CSS file 

* {
    padding: 0;
    margin: 0;
    border: 0;
}

    /* Layout */
    body {
        width: 1280px;
        height: 720px;
        background-image: url("../img/backk.jpg");
        position: fixed;
    }

    .newsItem {
        padding: 10px;
        color: #fff;
        width: 1250px;
        height: 100px;
        margin-bottom: 10px;
        margin-left: 80px;
        background-color: #388e8e;
    }

    .title {
        color: #87d2ef;
        font-size: 20px;
    }

    .description {
        color: #fff;
        font-size: 15px;
    }

    .img {
        width: 50px;
        height: 60px;
        position: absolute;
        left: 50px;
        top: 50px;
    }

    .text {
        position: absolute;
        width: 500px;
        height: 400px;
        left: 400px;
        top: 50px;
        font-size: 25px;
        color: #fff;
    }

    #Content {
        -webkit-transition: top 1s ease-in-out;
    }

    .transitions .top {
        top: 0;
    }

    .transitions .bottom {
        top: -70px;
    }




// Finally HTML file 

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Tunisie</title>

        <!-- TODO : Common API -->
        <script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/API/Widget.js"></script>
        <script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/API/TVKeyValue.js"></script>
        <script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/jquery.js"></script>

        <!-- TODO : Javascript code -->
        <script type="text/javascript" src="app/javascript/Parser_News.js"></script>
        <script type="text/javascript" src="app/javascript/Data_News.js"></script>
        <script language="javascript" type="text/javascript" src="app/javascript/News.js"></script>
                <script language="javascript" type="text/javascript" src="app/javascript/testScroll.js"></script>


        <!-- TODO : Style sheets code -->
        <link rel="stylesheet" href="app/stylesheets/testScroll.css" type="text/css">

        <!-- TODO: Plugins -->

    </head>

    <body onload="Main.onLoad();" onunload="Main.onUnload();">
<!-- Dummy anchor as focus for key events -->
        <a href="javascript:void(0);" id="anchor" onkeydown="Main.keyDown();"></a>
    <div class="newsItem" id="Content" style="width:100%; top:50px; left:100px; border:solid 1px #000000; position:fixed;">
        </div>
    </body>
</html>

【讨论】：