If you animate the scroll that’s getting really difficult, we’re struggling with that again lately. I made the mistake of trying to use native scroll for something where I wanted to have too much control, again. If you scroll and there’s a certain scroll velocity, and you lift your finger up and it keeps on scrolling, and it reaches a certain threshold and you want to have it snap there. […] If you want to do it by JavaScript you can set the scroll position. On iOS I think that’s going to stop the scroll velocity immediately. On Chrome it snaps to that point but it keeps on scrolling with the same velocity. It doesn’t reset the velocity, it still has that speed, that motion, it just sets the position for where it’s moving. So it’s pretty much impossible to control that. In the end I think we had to completely redo the scrolling, pretty much and just have everything be translated via a transform translate and just do all the scrolling by JavaScript. Because we were already doing all of this gesture, touch input handling, anyway, and it was just easier and more seamless if we didn’t switch between different modes. I actually had that same thing again, that I wanted to build a “simple” horizontal slider on a completely different project. I first thought it’s just horizontal scrolling, if I’m going to use native scroll that’s going to work fine. I think it’s also a pretty common pattern now to use on mobile pages and just maybe hide the scrollbar, on mobile there’s no scrollbar anyway. And then you have these horizontal, pannable sliders, where you can just pan through different products horizontally.
Do you mean like a carousel?
Yes, like a carousel, pretty much. But the traditional jQuery carousel is just sliding between different items, but that doesn’t feel so nice on mobile. So I think a lot of ecommerce sites are moving to carousel through products. Also in the Google results you will find that for the products, or even the menu items, often in a tab menu are like that, pannable. I wanted to adopt that pattern, to just use the scrolling. Again I ran into a problem, if you want to control that, you want to have your own snapping behavior, and control the snapping via JavaScript. I like to use this animation library called Motion, it’s not really that relevant to this, it’s just a JavaScript animation library, it’s very lightweight. It’s really nice to have snappy animations. You can’t really do that kind of stuff with scrolling. I think there’s now the CSS snap points API, which is kind of
Made with FlippingBook - professional solution for displaying marketing and sales documents online