[csswg-drafts] [css-scroll-snap] Ability to override mandatory snapping via “scroll and hold” (#7530)

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

== [css-scroll-snap] Ability to override mandatory snapping via “scroll and hold” ==
I am experimenting with adding scroll snapping to my Twitter timeline via user styles (the Stylus browser extension). This is the code that I have right now:

```css
html {
    scroll-snap-type: y mandatory !important;
    scroll-behavior: smooth !important;
}

/* each tweet in the timeline is an <article> element */
article {
    scroll-snap-align: start !important;
}

/* make the header at the top of the timeline also a snap point */
[aria-label="Home timeline"] > :first-child {
    position: static !important;
    scroll-snap-align: start !important;
}

/* hide annoying toast notification */
[aria-label="New Tweets are available."] {
    display: none !important;
}
```

I had to pick between `proximity` and `mandatory` snapping. I chose `mandatory` because I like how it always scrolls a tweet to the top whenever I press the Space bar. Sometimes it scrolls more, sometimes less, but there is always the start of a tweet at the top of the viewport on each key press. It works really well in Firefox Nightly. Take a look:

https://user-images.githubusercontent.com/716405/180671576-f7440459-00c2-4046-b9a3-08690d685cba.mp4

However, there is a problem. When a tweet is taller than my viewport, it seems to be impossible to view the bottom of the tweet because the browser forcefully snaps this tweet (or the next tweet) to the top. Even when I switch to `proximity` snapping, I also sometimes experience this problem (depending on the browser and other factors). See the problem here: 

https://user-images.githubusercontent.com/716405/180671880-7bf68f3f-ba0c-4a30-a435-a44d269e4ffc.mp4

My ideal experience would be this:

1. forced (mandatory) snapping when I press the Space bar (and Shift + Space bar for the other scrolling direction)  
2. an ability to override forced snapping

I suggest the following: On my laptop’s trackpad, if I scroll (two-finger vertical swipe) but then hold that position (fingers still touching the trackpad) for a second or so, this would instruct the browser to lock that scroll position, which would override snapping. This could also work on touch screens. I’m not sure what to do about PCs without trackpads; maybe a modifier key?

This ability could also be disabled by default (to not risk breaking existing websites), and there could be a new CSS property that would allow websites to unlock this ability for its visitors.




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


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

Received on Monday, 25 July 2022 00:24:20 UTC