[css-scroll-snap-1] Avoid page scrolling skipping past snappable items · Issue #10914 · w3c/csswg-drafts (original) (raw)

This originally came up from @johannesodland as a potential issue with scroll-buttons in #10722 (comment) however it's a pre-existing generic issue with scroll-snap, so filing it separately.

When a user pages down, usually by pressing the page-down key, they expect to scroll no further than one page if that is a valid scroll location. However, some browsers can select the next snap point as the target resulting in a scroll of more than a scrollport in length.

E.g. if you have a scrollport height of 1000px, most browsers will try to scroll by 850px. If however the nearest snappable element has a snap alignment that is further, then it can be selected, resulting in scrolls even greater than 1000px and an experience where content has been skipped over - even when that content itself defined a valid snap area. We should fix this so that it's easy to make an experience where

Codepen demo using page-down key: https://codepen.io/flackr/pen/abgeOKY
Original demo from @johannesodland using scrollTo api: https://codepen.io/johannesodland/pen/WNqmoYy