Implement 'scroll-snap-stop'
Categories
(Core :: CSS Parsing and Computation, enhancement, P3)
Tracking
()
People
(Reporter: sebo, Assigned: hiro)
References
(Blocks 2 open bugs, )
Details
(Keywords: dev-doc-complete, Whiteboard: [layout:backlog], [wptsync upstream])
Attachments
(5 files)
The latest CSS Scroll Snap spec. defines a 'scroll-snap-stop' property defining whether the scroll container must stop at each snap position it passes, or may pass multiple snap positions before coming to rest. This property should be implemented accordingly. Sebastian
|
Reporter | |
Updated•8 years ago
|
|
||
Comment 1•7 years ago
|
||
Too late for firefox 52, mass-wontfix.
|
||
Updated•7 years ago
|
|
||
Comment 2•6 years ago
|
||
This feature is marked at-risk in the latest draft.
|
Assignee | |
Updated•5 years ago
|
|
||
Comment 3•5 years ago
|
||
FWIW, the feature was marked at risk due to lack of implementation interest. But we (at Chromium) have implemented and plan to ship it soon as well. I have let the spec editors know this quite a while back but thought to mention it here as well.
This is mainly because we have heard from several developers (e.g., AirBnb, AMP) that they want this. A particular popular usecase is to create full-size image carousels that only snap to the next image (e.g., similar to how native apps do such things). This is exactly why this was in the spec in the first place. Normally a fling gesture snaps to the closest area near its "natural end point" which is not the right behavior in such usecases.
We have added one wpt test as well for this feature: https://wpt.fyi/results/css/css-scroll-snap/scroll-snap-stop-always.html?label=master&product=chrome%5Bexperimental%5D&product=edge&product=firefox%5Bexperimental%5D&product=safari%5Bexperimental%5D&aligned&q=scroll-snap
|
|
||
Comment 4•5 years ago
|
||
Are you able to tell me if Firefox plans to implement this feature at all? Or do you have objections to having it in the specification?. I like to include this information in my blink intent-to-ship [1] if possible.
[1] https://groups.google.com/a/chromium.org/d/msg/blink-dev/bkUwigYHJDM/psuEmULvBAAJ
|
||
Comment 5•5 years ago
|
||
Emilio, do you know who would be able to answer the questions above? Or should those just go to https://github.com/mozilla/standards-positions ?
|
|
Assignee | |
Comment 6•5 years ago
|
||
I am planing to implement this but not soonish because the code will be really messy without dropping the code for the old scroll snap feature (bug 1218264, bug 1218265 and more cleanup). So my current plan is
- Ship the new scroll snap type in 68 (I mean 68 as a release)
- Drop the old implementation entirely
- Cleanup the code
- Implement scroll-snap-stop
|
||
Comment 7•5 years ago
|
||
Yeah, Hiro / Botond are better to reply to that question :)
|
||
Updated•5 years ago
|
Is this still not implemented?
I'm not sure if I'm hallucinating, but it seems to work in my firefox nightly 84.0.2 (64-bit)
|
|
Reporter | |
Comment 9•3 years ago
•
|
||
The scroll-snap-stop property is not implemented yet, though most of the others parts of the CSS Scroll Snap specification. See also bug 1231777.
For what it's worth, Chromium already implemented it, though it doesn't work as expected. Therefore I've filed https://bugs.chromium.org/p/chromium/issues/detail?id=1122774.
Sebastian
PS: 84.0.2 is the current stable version of Firefox, Nightly is at 86.0a1.
|
||
Comment 10•3 years ago
|
||
The scroll-snap-stop property works quite well on Chromium/Safari as of today. The whole scroll-snap feature is quite useless if the stop is not implemented, at least if you have more than two sections. Are there any news about this issue?
|
||
Comment 11•3 years ago
|
||
|
||
Comment 12•2 years ago
|
||
Hi :hiro! Do you have plans to work on that?
|
|
Assignee | |
Comment 13•2 years ago
|
||
Yep, We have a plan to work on this in this H2 (or H1 if it's possible).
|
||
Comment 14•2 years ago
|
||
I have a need for this right now. Use case is a responsive horizontal carousel, with items having varied widths.
WORKS:
On various devices/browsers, scroll snap with organic scroll interactions (ie touch swipes, mousewheel left/right, etc).
PROBLEM:
The carousel also has visible left/right arrows for alternative navigation (mainly used by desktop users). On clicking an arrow once, I simply need to programmatically scroll to the next available snap point (whatever it is). This is easily done using scrollBy(<some-huge-amount-like-3000px>) and letting scroll-snap-stop stop the scroll at the next snap point (usually like 300px). It works great in Chrome and other browsers, and saves me from having to do a bunch of extra work in JS.
In Firefox, this does not work. Instead I'll have to feature-detect and give Firefox users a lesser experience (no snapping when clicking left/right arrows). The alternative is a mess of JS functions to track exact scroll position relative to items (stuff we did 10 years ago).
|
|
Assignee | |
Comment 15•2 years ago
|
||
I've started working on this. But before doing this, we have to fix/change our implementation such as bug 1766192.
|
|
Assignee | |
Comment 16•2 years ago
|
||
In our scroll snap implementation, there's a special handling on a page
scrolling that the closest snap point in the same page before scrolling is prior
to the closest snap point in the next page. There was no test case to test the
behavior.
|
|
Assignee | |
Comment 17•2 years ago
|
||
Depends on D145849
|
|
Assignee | |
Comment 18•2 years ago
|
||
Depends on D145850
|
|
Assignee | |
Comment 19•2 years ago
|
||
Depends on D145851
|
|
Assignee | |
Comment 20•2 years ago
|
||
If the content is auto scaling down, the document.scrollingElement is not
scrollable.
|
||
Updated•2 years ago
|
|
|
||
Updated•2 years ago
|
|
|
Assignee | |
Comment 21•2 years ago
|
||
Will land after this softfreeze cycle finished.
|
||
Comment 22•2 years ago
|
||
Pushed by hikezoe.birchill@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/aff07890d3b8 Add a mochitest to make sure our special handling for page down/up scrolls. r=botond https://hg.mozilla.org/integration/autoland/rev/dfd9b305783e Add a meta viewport to avoid auto scaling down the content in scroll-snap-stop-change.html. r=botond https://hg.mozilla.org/integration/autoland/rev/96a2d260907f Parse scroll-snap-stop style and propagate it to APZ side. r=emilio,botond https://hg.mozilla.org/integration/autoland/rev/7da3cb718bb2 Rewrite CalcSnapPoints::AddEdge with switch statement. r=botond https://hg.mozilla.org/integration/autoland/rev/3ef6f40d0e14 Honor `scroll-snap-stop: always`. r=botond
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/34258 for changes under testing/web-platform/tests
|
||
Comment 24•2 years ago
|
||
| bugherder | ||
https://hg.mozilla.org/mozilla-central/rev/aff07890d3b8
https://hg.mozilla.org/mozilla-central/rev/dfd9b305783e
https://hg.mozilla.org/mozilla-central/rev/96a2d260907f
https://hg.mozilla.org/mozilla-central/rev/7da3cb718bb2
https://hg.mozilla.org/mozilla-central/rev/3ef6f40d0e14
Upstream PR merged by moz-wptsync-bot
|
|
Assignee | |
Updated•2 years ago
|
|
||
Comment 26•2 years ago
|
||
"Firefox 103 for developers" doc has been updated here: https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/103#css. Doc issue tracker for this work is here: https://github.com/mdn/content/issues/17469
Description
•