{"action":"created","issue":{"url":"https://api.github.com/repos/w3c/csswg-drafts/issues/1388","repository_url":"https://api.github.com/repos/w3c/csswg-drafts","labels_url":"https://api.github.com/repos/w3c/csswg-drafts/issues/1388/labels{/name}","comments_url":"https://api.github.com/repos/w3c/csswg-drafts/issues/1388/comments","events_url":"https://api.github.com/repos/w3c/csswg-drafts/issues/1388/events","html_url":"https://github.com/w3c/csswg-drafts/issues/1388","id":229298184,"number":1388,"title":"[css-overflow][cssom-view] Set the option for scrolling behavior triggered by focus","user":{"login":"jihyerish","id":6636090,"avatar_url":"https://avatars2.githubusercontent.com/u/6636090?v=3","gravatar_id":"","url":"https://api.github.com/users/jihyerish","html_url":"https://github.com/jihyerish","followers_url":"https://api.github.com/users/jihyerish/followers","following_url":"https://api.github.com/users/jihyerish/following{/other_user}","gists_url":"https://api.github.com/users/jihyerish/gists{/gist_id}","starred_url":"https://api.github.com/users/jihyerish/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jihyerish/subscriptions","organizations_url":"https://api.github.com/users/jihyerish/orgs","repos_url":"https://api.github.com/users/jihyerish/repos","events_url":"https://api.github.com/users/jihyerish/events{/privacy}","received_events_url":"https://api.github.com/users/jihyerish/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":4,"created_at":"2017-05-17T09:55:31Z","updated_at":"2017-05-24T07:38:14Z","closed_at":null,"body":"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.\r\n\r\nThe 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>).\r\nFocusing 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.\r\n\r\n[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().\r\n\r\nIt could be nice if we can disable the scrolling behavior when the focus is triggered by <code>mouseover</code> or for other use cases.\r\nCustomizing the scrolling behavior of Element.focus already been discussed in https://github.com/whatwg/html/issues/834.\r\n\r\nI think there could be some approaches for this:\r\n\r\n1. New Property - `focus-scroll`\r\ncould customize the scrolling behavior when it's applied to the scrollable area.\r\n```\r\nValue: auto | none | smooth\r\n```\r\n\r\n- auto:  Element.focus() makes the element scroll into view\r\n- none:  Element.focus() doesn't make the scrolling behavior\r\n- smooth: Element.focus() makes the element come into view with smooth scrolling\r\n\r\nor\r\n\r\n2. Add `scrollOptions` as a parameter for Element.focus()\r\ncould customize the scrolling behavior triggered by focus.\r\n\r\n```\r\nElement.focus(scrollOptions);\r\n\r\nscrollOptions\r\n{\r\n  behavior: \"auto\" | \"none\" | \"smooth\",\r\n  block: \"start\" | \"end\"\r\n }\r\n```\r\n- auto:  Element.focus() makes the element scroll into view\r\n- none:  Element.focus() doesn't make the scrolling behavior\r\n- smooth: Element.focus() makes the element come into view with smooth scrolling\r\n\r\n`scrollOptions ` refers to the scrollIntoViewOptions of Element.scrollIntoView().\r\n\r\nThe naming of `focus-scroll` may not proper, and the second approach; adding `scrollOptions` would be more reasonable.\r\nI'm think many developers need this feature."},"comment":{"url":"https://api.github.com/repos/w3c/csswg-drafts/issues/comments/303643539","html_url":"https://github.com/w3c/csswg-drafts/issues/1388#issuecomment-303643539","issue_url":"https://api.github.com/repos/w3c/csswg-drafts/issues/1388","id":303643539,"user":{"login":"jihyerish","id":6636090,"avatar_url":"https://avatars2.githubusercontent.com/u/6636090?v=3","gravatar_id":"","url":"https://api.github.com/users/jihyerish","html_url":"https://github.com/jihyerish","followers_url":"https://api.github.com/users/jihyerish/followers","following_url":"https://api.github.com/users/jihyerish/following{/other_user}","gists_url":"https://api.github.com/users/jihyerish/gists{/gist_id}","starred_url":"https://api.github.com/users/jihyerish/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jihyerish/subscriptions","organizations_url":"https://api.github.com/users/jihyerish/orgs","repos_url":"https://api.github.com/users/jihyerish/repos","events_url":"https://api.github.com/users/jihyerish/events{/privacy}","received_events_url":"https://api.github.com/users/jihyerish/received_events","type":"User","site_admin":false},"created_at":"2017-05-24T07:38:14Z","updated_at":"2017-05-24T07:38:14Z","body":"> 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.\r\n\r\nI considered to use \"none\" value when the scrolling behavior triggered via focusing by `mouseover`.\r\n\r\nSo 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 `mouseover` would trigger scroll too much. \r\nI'd like to solve this problem by no scrolling behavior on that condition.\r\nAlso the threshold wouldn't be needed because we can `mouseover` the 1px of the element which is inside the optimal viewing region.\r\n\r\nI 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."}}
{"actor":{"display_login":"jihyerish"}}