Programmatically stop -webkit-overflow-scrolling

Question

I have a phonegap application that uses iOS scrolling through -webkit-overflow-scrolling in a div. I want to manually stop the current scroll when the user clicks a button (to scroll back at the top of the page). Is this doable?

Answer 1

This is really very possible when using fastclick.js . Lib removes the 300 ms delay delay on mobile devices and allows you to capture events during inertia / impulse scrolling.

After enabling fastclick and attaching it to the body element, my code to stop scrolling and jump to the beginning looks like this:

 scrollElement.style.overflow = 'hidden'; scrollElement.scrollTop = 0; setTimeout(function() { scrollElement.style.overflow = ''; }, 10); 

The trick is to set overflow: hidden , which stops the inertia / impulse scrolling. Please see My violin for full implementation to stop scrolling during inertia / impulse .

Answer 2

Unfortunately, this is not possible at the moment. The scroll event is fired only when the scroll completes. As long as the momentum continues to move content, not a single event is triggered. You can see this in Figure 6-1 Apple Panning Guide for Safari Web Content Gesture .

I also created a script to demonstrate this behavior. The value of scrollTop set after the completion of the iOS animation.

Answer 3

You can capture a touch event using 'touchstart' instead of 'click', because the click event sometimes does not fire until the pulse scrolls. Try this jQuery solution:

 $('#yourTrigger').on('touchstart', function () { var $div = $('.yourScrollableDiv'); if ($div.scrollTop() === 0) { return false; //if no scroll needed, do nothing. } $div.addClass('scrolling'); //apply the overflow:hidden style with a class $div.animate({ scrollTop: 0 }, 600, function () { $div.removeClass('scrolling'); //scrolling has finished, remove overflow:hidden }); } 

where the scroll class simply has the CSS property, overflow: hidden, which, as Patrick-Rudolph said, will stop the scroll scroll.

 .scrolling { overflow: hidden; } 

Note. It is best to use the callback function to indicate when the scroll animation ends, rather than setting the timer function.