响应上下按键,三星智能电视页面滚出视图

Question

我有一个简单的智能电视应用程序,它显示垂直列表中的项目列表,其中一个键处理程序附加到与包含列表的DIV相关联的锚点.

该列表包括一组DIV,每个DIV显示由外部DIV包围的文本字符串.完整列表的高度为400px,完全在屏幕高度的540px范围内.

用户可以使用向上和向下按钮在列表中上下移动以突出显示各个项目.

在模拟器上,这可以正常工作,但是当用户按下时,在真实的电视上,不仅高光移动应该完成,而且整个屏幕向上移动.

同样,当用户点击时,高亮显示正确移动但屏幕向上移动.

这是列表的标记

<div id="itemList">
    <div class="slot" id="slot0">Slot 0</div>
    <div class="slot" id="slot1">Slot 1</div>
    <div class="slot" id="slot2">Slot 2</div>
    <div class="slot" id="slot3">Slot 3</div>
    <div class="slot" id="slot4">Slot 4</div>
</div>
<a href='javascript:void(0);' id='anchorList' onkeydown='KeyHandler.list_KeyPress()'></a>

这是CSS

#itemList {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 250px;
    height: 400px;
    background-color: #000000;
}

#itemList .slot {
    color: #ff0000;
    width: 100%;
    height: 80px;
}

事件list_KeyPress函数递增或递减突出显示项的索引,并将其类更改为slotSelected

屏幕上没有任何内容正在重新绘制,移动或调整大小.唯一的变化是突出显示的DIV类.

为了消除这个因素,我在list_KeyPress()中注释掉了代码并仍然得到了同样的问题 - 所以不是这样.

这绝对与按键有关.

Answer 1

实际上,我自己已经解决了这个问题.在CSS中我将以下内容添加到body和html样式中:

body, html {
    overflow: hidden;
}