MDN-Browser-Compatibility-Report-2020

covering that. I haven’t heard that much about it, either because I just didn’t know about the API, or it’s really, really new and it’s not widely supported. I think it’s not widely supported, but I might be wrong because I haven’t heard too much about it yet. I think the API would kind of cover that use case, and you can just have snap points defined in CSS and don’t need JavaScript at all because it’s all handled natively. This would probably be really difficult to polyfill for older browsers, for the same reason that scroll is really hard to control. With native scroll events, if you have touch input and first you have a touchdown, then you have a touchmove, and then eventually you have a scroll event, it kind of connects together, and evolves into the next kind of event. A very common pattern you want to do if you have scrolling on touch input, or if you want to do it often, is you don’t want to immediately start the interaction when the touchmove event happens, but wait a little bit for the direction in which the user is going to move. For example, I think most web browsers do that, or most native scrolling, that if you have horizontal and vertical scrolling, if you move your finger vertically it’s going to start moving vertically, if you moved horizontally it’s going to move horizontally. It’s kind of locking in the direction. Also it’s important to differentiate between a single touch and a scroll. I think there’s this threshold of about 5-8 pixels, something like that, until the scrolling is going to start. This is something that Chrome does, and iOS does as well, or WebKit does as well, that you don’t start scrolling right away. If you have, for example, a carousel that is horizontal and it’s built with transform translate, and you control the carousel entirely via JavaScript, you might want to listen to the touchdown event and then wait for touchmove, and only start moving the carousel when the touchmove has moved enough to right or the left. Otherwise it’s probably going to be a scroll, and if the user is just scrolling up and down you don’t want to have the carousel move a little bit to the left and right, that’s going to not look nice. You can do that, that’s possible. The problem is the other way, if the user starts moving the carousel and then decides to also move their finger up and down, you don’t want the browser to suddenly start a scroll interaction. You can do it on iOS, because on iOS you can call preventDefault() on the touchmove event, if the touchmove event hasn’t led to a scroll yet. Because first there’s the

Made with FlippingBook - professional solution for displaying marketing and sales documents online