Virtual Grid List Sample

Background

The input device of the smart TV is the remote controller. Focusing an element with the remote controller is based on pointing(mouseover) and pressing buttons(onkeydown).

Element.focus() is used the UA may scroll the element into view. The result is reasonable when focusing based on onkeydown. But when focusing by mouseover the element, focus event also triggers the scroll behavior. In this case, it may bring too much scrolling. This behavior dosen't meet with the requirement of TV app developers and users and it isn't good UX for the smart TV.

Demo

This demo is the grid list sample. An element in the grid list can be focused by pressing the keyboard (up, down, left, right buttons) or pointing with the mouse.

This shows no scrolling behavior when focusing by mouseover. If the option isn't checked, it also shows the result of the default scroll behavior triggered by Element.focus().

Option
item 001
item 002
item 003
item 004
item 005
item 006
item 007
item 008
item 009
item 010
item 011
item 012
item 013
item 014
item 015
item 016
item 017
item 018
item 019
item 020
item 021
item 022
item 023
item 024
item 025
item 026
item 027
item 028
item 029
item 030
item 031
item 032
item 033
item 034
item 035
item 036
item 037
item 038
item 039
item 040