3 ms·

I think we really have to take a step back away from this annoying scrolling / auto-moving element behavior for product info pages. I had a moment where my mous

I think we really have to take a step back away from this annoying scrolling / auto-moving element behavior for product info pages. I had a moment where my mouse was chasing a moving 'Loans' tile.

burlesona 5y ago
Designers have gotten really carried away. This stuff looks nice when you click through it in Figma, because it's a slideshow. But when it's interactive it's a pain in the butt. If you move through the page really slowly it sort of works, but real people in the real world scroll fast to scan the content of the page, and this page is a disaster to scan.
circa 5y ago
I feel like everything these days is "optimized" for mobile sites. When viewing on a desktop they all look horrible.
tqx 5y ago
Often derided as "scroll jacking" or more politely referred to as "scroll snapping" it's being added to the CSS spec so likely not going anywhere. https://drafts.csswg.org/css-scroll-snap-1/ 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-business-checking-120023988.html https://finance.yahoo.com/news/square-launches-banking-busin... https://web.archive.org/web/20210720152407/https://finance.yahoo.com/news/square-launches-banking-business-checking-120023988.html https://web.archive.org/web/20210720152407/https://finance.y...
- mikepurvis 5y ago
  Ugh. 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.
- madeofpalk 5y ago
  This behaviour has nothing to do with scroll snapping. 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 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 5y ago
    From TFA: > 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.
    - madeofpalk 5y ago
      It might sound similar, but it's very different in practice.
      - tqx 5y ago
        Does this page enforce the scroll positions that a scroll container’s scrollport may end at after a scrolling operation has completed, in practice?
    - yuchi 5y ago
      Sorry to disagree. The interaction you see in the page is not scroll snapping. With scroll snapping you the user have always control of the scrollable content. What you do not have control over is where it will stop scrolling. A similar behavior to forced guides in a movable element on rails (such as drawers). This page doesn’t scroll at all, and uses the scroll as a time control for a “movie”. And that is scroll jacking, as it hijacks the scroll position to do something completely different. This page, at least on mobile, is also guilty of implementing it in the worst way possible: without any alternative scroll indications and without smooth continuous transitions that make it clear that you are controlling the animation through the scroll. Apple is somewhat better at doing this since the scrolljacking procedure usually brings you to an element which, at the end of a glamourous entrance, actually scrolls away with the page.
- ceiphr 5y ago
  From my experience, scroll snapping is quite nice. On the mobile view of https://www.nytimes.com/ https://www.nytimes.com/, if you scroll down enough, you'll find an example of a scroll snapping row of opinion pieces. It is 10x better than scroll jacking. Scroll jacking is so repulsive to see anywhere you aren't using a mouse wheel.

I think we really have to take a step back away from this annoying scrolling / auto-moving element behavior for product info pages. I had a moment where my mouse was chasing a moving 'Loans' tile.

burlesona 5y ago

Designers have gotten really carried away. This stuff looks nice when you click through it in Figma, because it's a slideshow. But when it's interactive it's a pain in the butt. If you move through the page really slowly it sort of works, but real people in the real world scroll fast to scan the content of the page, and this page is a disaster to scan.

circa 5y ago

I feel like everything these days is "optimized" for mobile sites. When viewing on a desktop they all look horrible.

tqx 5y ago

Often derided as "scroll jacking" or more politely referred to as "scroll snapping" it's being added to the CSS spec so likely not going anywhere. https://drafts.csswg.org/css-scroll-snap-1/ 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-business-checking-120023988.html https://finance.yahoo.com/news/square-launches-banking-busin... https://web.archive.org/web/20210720152407/https://finance.yahoo.com/news/square-launches-banking-business-checking-120023988.html https://web.archive.org/web/20210720152407/https://finance.y...

mikepurvis 5y ago
Ugh. 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.
madeofpalk 5y ago
This behaviour has nothing to do with scroll snapping. 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 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 5y ago
  From TFA: > 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.
  - madeofpalk 5y ago
    It might sound similar, but it's very different in practice.
    - tqx 5y ago
      Does this page enforce the scroll positions that a scroll container’s scrollport may end at after a scrolling operation has completed, in practice?
  - yuchi 5y ago
    Sorry to disagree. The interaction you see in the page is not scroll snapping. With scroll snapping you the user have always control of the scrollable content. What you do not have control over is where it will stop scrolling. A similar behavior to forced guides in a movable element on rails (such as drawers). This page doesn’t scroll at all, and uses the scroll as a time control for a “movie”. And that is scroll jacking, as it hijacks the scroll position to do something completely different. This page, at least on mobile, is also guilty of implementing it in the worst way possible: without any alternative scroll indications and without smooth continuous transitions that make it clear that you are controlling the animation through the scroll. Apple is somewhat better at doing this since the scrolljacking procedure usually brings you to an element which, at the end of a glamourous entrance, actually scrolls away with the page.
ceiphr 5y ago
From my experience, scroll snapping is quite nice. On the mobile view of https://www.nytimes.com/ https://www.nytimes.com/, if you scroll down enough, you'll find an example of a scroll snapping row of opinion pieces. It is 10x better than scroll jacking. Scroll jacking is so repulsive to see anywhere you aren't using a mouse wheel.