5

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

该列表由一组 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() 中的代码，但仍然遇到同样的问题 - 所以不是这样。

这肯定与按键有关。

4

1 回答 1

7

实际上，我已经自己解决了这个问题。在 CSS 中，我在 body 和 html 样式中添加了以下内容：

body, html {
    overflow: hidden;
}
于 2012-02-10T18:08:09.997 回答