Samsung Smart TV page scrolls out of view in response to up-down key presses

Question

I have a simple Smart TV app that shows a list of items in a vertical list with a key handler attached to an anchor associated with the DIV containing the list.

The list comprises a set of DIVs showing a text string in each enclosed by an outer DIV. The height of the full list is 400px, well within the 540px of the screen height.

The user can move up and down the list with the up and down buttons to highlight individual items.

On the emulator this works fine, however on a real TV when the user hits down, not only does the highlight move done as it should, but the whole screen moves up.

Likewise, when the user hits up, the highlight moves correctly but the screen moves up.

Here's the markup for the list

<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>

Here's the CSS

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

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

The event list_KeyPress function increments or decrements the index of the highlighted item and changes the class of it to slotSelected

Nothing on the screen is being redrawn, moved or resized. The only change being made is the class of the highlighted DIV.

To eliminate this as a factor, I commented out the code inside the list_KeyPress() and still get the same issue - so it isn't that.

It is definitely something to do with the key presses.

Answer 1

Actually, I've solved this myself. In the CSS I added the following to the body and html style:

body, html {
    overflow: hidden;
}