addEventListener ('touchmove', handler, {passive: true}); To get around this, pass an object as the third parameter when adding an event listener. When the user starts scrolling, touchStart() is called.

By marking the event as passive, the browser can assume scrolling will not be affected, so it can start immediately. document.

We then compare these two values and see whether the user scrolls up or down. This time, we need to rely on Javascript. In our case we cannot use passive event listeners, because we’re conditionally prevent page scroll, and this cannot be done with passive event listeners. When the user then moves his finger on the display, touchMove() is called. javascript - with - react disable scroll ... How to disable scrolling temporarily? There we store the Y position.

Specifically, we need to prevent the touchmove event because otherwise it will bubble up and end up causing a scroll event even if overflow is hidden . E.g. in the case of the listview in the touchmove event we’re checking if the horizontal movement is larger than a threshold, we start swiping the listview item, and blocking the page scroll. document.addEventListener('touchstart', handler, {passive: true}); That simply addition will help you to prevent scroll junk on your sites, specially on mobile. Here is the code handling the touch event: Jagged scrolling is a clear sign something is up. Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

Events such as ‘wheel’ or ‘touchmove’ are able to cancel scrolling, so the page has to wait until the event has completed before the default scrolling behaviour can begin.

Keep it passive. touchmove:passive (event) Event will be fired on touch move (mousemove) event added as passive listener (impossible to prevent default) touchend:passive (event) Event will be fired on touch end (mouseup) event added as passive listener (impossible to prevent default) serviceWorkerRegisterSuccess (registration) We have the touchstart and touchmove events on the move, through which we can see where the user is scrolling. Touch events are typically available on devices with a touch screen, but many browsers make the touch events API unavailable on all desktop devices, even those with touch screens. The reason for this is that some websites use the availability of parts of the touch events API as an indicator that the browser is running on a mobile device.

I'm not sure what is causing this problem, I am new to working with touch events and can't seem to fix this problem. In some cases, the browser is being forced to wait because of listeners applied to the page.