Re: [csswg-drafts] [css-scroll-snap] More granular control over scroll-snap-stop (#5467)

I've built two code pen examples to illustrate the current behaviour as a starting point for the discussion. 

In these examples we use CSS Scroll Snap for "full page" scroll snapping. Each element have a height of 100vh and are of equal importance.

**scroll-snap-stop: normal;**
https://codepen.io/johannesodland/pen/WNwEbEX 

When set to `normal` it is easy for the user to "overshoot" when scrolling (At least in some UA implementations). The user might scroll past a few snap positions when trying to scroll to the next. On the plus side, it is easy to scroll through the container to snap points further down.

We've received feedback from users not feeling in control. 

![scroll-snap-stop-normal](https://user-images.githubusercontent.com/175195/91698749-81393d80-eb73-11ea-8fda-61b2989f957c.gif)


**scroll-snap-stop: always;**
https://codepen.io/johannesodland/pen/LYNjEYv

When set to `always` it is impossible to "overshoot". Scrolling stops at the snap-point. It is however difficult to scroll fast to a snap point later in the scroll container. The user has to scroll through each snap point, which can be tedious.

![scroll-snap-stop-always](https://user-images.githubusercontent.com/175195/91698768-89917880-eb73-11ea-8c27-e1c0d6300b79.gif)


With the current spec authors are left to choose between two extremes with their respective tradeoffs. With `normal` it is easy to overshoot when scrolling (depending on UA implementation). With `always` it is tedious to scroll through many snap points. 

If we use physics to illustrate, we can say that the scrolling content has momentum, and that each snap point exerts a force on the content. Snap points with `normal` have a weak force that is easy to scroll by, and snap points with scroll-snap: `always` have a strong force. 

Could there be a way to give authors more granular control over how strongly the content snaps?

-- 
GitHub Notification of comment by johannesodland
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5467#issuecomment-683653544 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 31 August 2020 08:51:24 UTC