-
Notifications
You must be signed in to change notification settings - Fork 689
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[css-overflow][cssom-view] Set the option for scrolling behavior triggered by focus #1388
Comments
When the UA is doing the focusing itself, based on the tab key or actual mouse focusing, I believe this is probably OK to leave as a quality of implementation. But when you are doing the focusing via javascript, I can see how the UA, lacking some information about the context and about why something is being focused, could do it wrong (and scroll too much, or in ways unexpected to the user). So having some way to control that seems useful. Since you want different scrolling behaviors depending on how the script triggers the focus, I think that the parameter to Element.focus() makes more sense than the css property. I think maybe the values should be different though, as I am not sure "none" is a desirable value. Having a focused element be entirely off screen doesn't sound good. Maybe the choice is more between:
That said, option 2 still has issues: if only 1px is in the optimal viewing region, you probably want to scroll anyway. But where is the threshold? |
Yes, this is what I intend to solve.
Are both options for the behavior of "none" value?
For case 1, the element don't scroll.
When having the "none" value, the element don't scroll even if the 1px of it is in the optimal viewing region. What would be the use case when the threshold is needed? |
No, I mean my first option to be similar to "auto", and my second to be instead of "none".
I don't know if a threshold is the right way to go about this, but it seems to me that from a user point of view, an element being completely outside the optimal viewing region and and element only having 1px inside it are pretty much the same. |
I considered to use "none" value when the scrolling behavior triggered via focusing by So if we could use "none" value for focus(), when we consider an element only having 1px inside the optimal viewing region behave to scroll inside it, the I think the same scroll behavior by focus for both an element being completely outside the optimal viewing region and an element only having 1px inside it could be implemented by "auto" value. |
Right. If you're using it with mouseover, then a threshold of 1px is probably fine. |
Element.focus() is used the UA may scroll the element into view. The result is reasonable when focusing based on
onkeydown
. But when focusing bymouseover
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(
mouseover
) and pressing buttons(onkeydown
).Focusing by
mouseover
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 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().It could be nice if we can disable the scrolling behavior when the focus is triggered by
mouseover
or for other use cases.Customizing the scrolling behavior of Element.focus already been discussed in whatwg/html#834.
I think there could be some approaches for this:
focus-scroll
could customize the scrolling behavior when it's applied to the scrollable area.
or
scrollOptions
as a parameter for Element.focus()could customize the scrolling behavior triggered by focus.
scrollOptions
refers to the scrollIntoViewOptions of Element.scrollIntoView().The naming of
focus-scroll
may not proper, and the second approach; addingscrollOptions
would be more reasonable.I'm think many developers need this feature.
The text was updated successfully, but these errors were encountered: