(no title)
tqx | 4 years ago
https://drafts.csswg.org/css-scroll-snap-1/
Here I want to learn about the features of Square Banking but I can't do so at a glance, on the landing page for Square Banking. The best solution is to just give up and search Google News for a summary:
https://finance.yahoo.com/news/square-launches-banking-busin...
https://web.archive.org/web/20210720152407/https://finance.y...
madeofpalk|4 years ago
Scroll snapping is just "can i have a carousel without javascript", and is primarily a touch interaction. See this extremely brief demo https://codepen.io/tutsplus/pen/qpJYaK?editors=1100
I wouldn't call Square's site "scroll hijacking" - usually we use that to refer to when the actual native scroll behaviour/events are highjacked and prevented, and custom javascript scrolling happens. Instead on the Square site the DOM page is still scrolling natively, but an animation is progressed depending on the native page position. Maybe not ideal, but its much smoother and less jarring than actual scroll jacking.
SippinLean|4 years ago
> For instance, it is easy for a user to land at an awkward scroll position which leaves an item partially on-screen when panning.
> To this end, this module introduces scroll snap positions which enforce the scroll positions that a scroll container’s scrollport may end at after a scrolling operation has completed.
Which is exactly what this page is doing.
> primarily a touch interaction
It's exclusively a scroll interaction, whether the pointer event is the result of mouse or touch input.
> the DOM page is still scrolling natively
I'm not sure what you're trying to say by "DOM page." JS is reacting to the scroll position of the viewport. The user experience is the same.
RulerOf|4 years ago
Seems to work as intended with the touchpad, to the point where it was hard to even tell that the browser was doing something different.
ceiphr|4 years ago
It is 10x better than scroll jacking. Scroll jacking is so repulsive to see anywhere you aren't using a mouse wheel.
mikepurvis|4 years ago
On the other hand, at least if it's in CSS, it'll be a single standard method that you can turn off via a browser plugin or whatever, rather than everyone rolling their own.