サムスンのスマートTVページが上下キーの押下に応じて見えなくなる

Question

シンプルなスマートテレビアプリケーションで縦リストにキーハンドラを含む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; 
}