This property is in scroll snap level 1 specification CR [0]. Please consider implementing this. We (at Chromium) have implemented this and plan to ship it soon [1]. We have heard from several developers (e.g., See here [2] AirBnb, AMP [3]) 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) which is the motivation behind why this feature was added to 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 for this feature so far as well [4]. [0] https://www.w3.org/TR/css-scroll-snap-1/#scroll-snap-stop [1] https://chromestatus.com/features/5439846480871424 [2] https://bugs.chromium.org/p/chromium/issues/detail?id=823998#c3 [3] https://bugs.chromium.org/p/chromium/issues/detail?id=920482#c1 [4] 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
<rdar://problem/50708356>
Just to add a request to implement this. We have a web-app using card like interfaces and the ability to side-swipe between them one at a time with scroll-snap would be a far better option than the default.
From a developer perspective, this is a great API and works flawlessly for our use case in Chrome. There is no workaround to achieve this in Safari short of implementing custom scrolling.
<rdar://problem/46111181>
Created attachment 419028 [details] Patch
Created attachment 419030 [details] Patch
Comment on attachment 419030 [details] Patch This still needs a bit of work.
Created attachment 419116 [details] Patch
Comment on attachment 419116 [details] Patch Okay. I believe that I have sorted the failures that this patch was causing and it is now ready for review. Sorry for the noise.
Comment on attachment 419116 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=419116&action=review > Source/WebCore/ChangeLog:9 > + No new tests. Please add some words here, with a link to the spec, and list which WPT test the feature. > Source/WebCore/rendering/RenderLayerModelObject.cpp:204 > + bool scrollSnapStopChanged = > + oldStyle && oldStyle->scrollSnapStop() != newStyle.scrollSnapStop(); Don't wrap this.
Created attachment 419686 [details] Patch
Created attachment 419695 [details] Patch
Created attachment 419707 [details] Patch
(In reply to Simon Fraser (smfr) from comment #10) > Comment on attachment 419116 [details] > Patch Thanks for the review! > View in context: > https://bugs.webkit.org/attachment.cgi?id=419116&action=review > > > Source/WebCore/ChangeLog:9 > > + No new tests. > > Please add some words here, with a link to the spec, and list which WPT test > the feature. Sure thing. I've added the list of WPT tests here. > > > Source/WebCore/rendering/RenderLayerModelObject.cpp:204 > > + bool scrollSnapStopChanged = > > + oldStyle && oldStyle->scrollSnapStop() != newStyle.scrollSnapStop(); > > Don't wrap this. Okay. I've also unwrapped the lines around it for consistency.
Comment on attachment 419707 [details] Patch The assertion failure on the Mac Debug WK1 bot looks to be unrelated to this change.
Committed r272610: <https://commits.webkit.org/r272610> All reviewed patches have been landed. Closing bug and clearing flags on attachment 419707 [details].
Created attachment 423535 [details] The attached testcase is a basic HTML/CSS file that demonstrates minimum viable snap requirements.
`scroll-snap-stop` doesn't work properly, tested in STP Release 122. Unlike in Chromium, it scrolls past `scroll-snap-stop: always` hard stops. The previously attached testcase is a basic HTML/CSS file that demonstrates minimum viable snap requirements: outer hard snap (paging between colors), inner soft snap (aligning to black lines), un-snapped vertical scroll. If there is a preferred way of re-opening this bug over comment here (e.g. open a new bug and reference the original bug, or comment on the metabug 218115 tracking remaining CSS scroll-snap web compatibility issues), feel free to let me know.
Please open a new bug and file your test case there.
Opened bug 223406