以编程方式停止-webkit-overflow-scrolling

Question

I have a phonegap application that uses iOS native scrolling through -webkit-overflow-scrolling in a div. I want to be able to manually halt an ongoing scroll when the user clicks a button (to scroll back to the top of the page). Is this doable?

Answer 1

This is actually very possible when using fastclick.js . The lib removes the 300ms click delay on mobile devices and enables event capturing during inertia/momentum scrolling.

After including fastclick and attaching it to the body element, my code to stop scrolling and go to the top 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/momentum scrolling. Please see my fiddle for a full implementation of stop scrolling during inertia/momentum .

Answer 2

Unfortunately this is not possible at the moment. The scroll event is triggered only when the scrolling has come to an end. As long as the momentum keeps moving the content no events are fired at all. You can see this in Figure 6-1 The panning gesture in Apple's " Safari Web Content Guide ".

I also created a fiddle to demonstrate this behavior. The scrollTop value is set after iOS is done animating.

Answer 3

You can capture a touch event using 'touchstart' instead of 'click', as the click event sometimes doesn't seem to get fired until the momentum scroll completes. 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 'scrolling' class simply has the CSS property, overflow:hidden, which as @Patrick-Rudolph said, will halt any momentum scrolling in progress.

.scrolling {
    overflow: hidden;
}

Note: It's best to use a callback function to tell when your scroll animation finishes, rather than setting a timer function.