[css-scroll-snap] Ability to override mandatory snapping via “scroll and hold”

Open
#7,530 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
5/5
Estimated time
Over a week
Newbie friendliness
25/100
Issue type
Feature
Clarity
Needs clarification
Activity status
Stale
Tech stack
css
Domain
frontend, web-dev

Research direction

Start by reviewing the issue's CSS Scroll Snap examples, especially scroll-snap-type and scroll-snap-align, along with the described trackpad and touch interactions. Define how mandatory snapping could be overridden, whether a new CSS property is needed, and how the behavior should work across input devices before proposing a specification change.

Written by the indexing model from the issue text.

Description

css-scroll-snap-2

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:

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;
}

/* un-stick the sticky header and make it a snap position as well */
[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.

Dominant language
Bikeshed
Stars
4.9k
Forks
816
Avg merge
2d 18h
Merged PRs (30d)
24

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from w3c/csswg-drafts

All issues in w3c/csswg-drafts

Similar issues

More Web Dev issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.