[csswg-drafts] [css-overflow][cssom-view] Set the option for scrolling behavior triggered by focus

jihyerish has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-overflow][cssom-view] Set the option for scrolling behavior triggered by focus ==
Element.focus() is used the UA may scroll the element into view. The result is reasonable when focusing based on <code>onkeydown</code>. But when focusing by <code>mouseover</code> the element, focus event also triggers the scroll behavior.

The input device of the smart TV is the remote controller. Focusing an element with the remote controller is based on pointing(<code>mouseover</code>) and pressing buttons(<code>onkeydown</code>).
Focusing by <code>mouseover</code> may bring too much scrolling. This behavior doesn't meet with the requirement of TV app developers and users and it isn't good UX for the smart TV.

[Demo](https://jihyerish.github.io/virtual-grid-list/) shows no scrolling behavior when focusing by <code>mouseover</code>. If the option isn't checked, it also shows the result of the default scroll behavior triggered by Element.focus().

It could be nice if we can disable the scrolling behavior when the focus is triggered by <code>mouseover</code> or for other use cases.
Customizing the scrolling behavior of Element.focus already been discussed in https://github.com/whatwg/html/issues/834.

I think there could be some approaches for this:

1. New Property - `focus-scroll`
could customize the scrolling behavior when it's applied to the scrollable area.
```
Value: auto | none | smooth
```

- auto:  Element.focus() makes the element scroll into view
- none:  Element.focus() doesn't make the scrolling behavior
- smooth: Element.focus() makes the element come into view with smooth scrolling

or

2. Add `scrollOptions` as a parameter for Element.focus()
could customize the scrolling behavior triggered by focus.

```
Element.focus(scrollOptions);

scrollOptions
{
  behavior: "auto" | "none" | "instant" | "smooth",
  block: "start" | "end"
 }
```

`scrollOptions ` refers to the scrollIntoViewOptions of Element.scrollIntoView().

The naming of `focus-scroll` may not proper, and the second approach; adding `scrollOptions` would be more reasonable.
I'm think many developers need this feature.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1388 using your GitHub account

Received on Wednesday, 17 May 2017 09:55:40 UTC