Question

I have a script that monitors scrolling and takes control of the scrolling to animate the page based on certain parameters. To do this, it calls window.scrollTo(0, currentScrollTop); which perfectly interrupts the smooth scrolling in Firefox on Windows. I can then animate the page scroll to the place where I want it.

Unfortunately, this trick doesn’t appear to work in browsers in MacOS which results in a broken experience as JavaScript and the browser compete to scroll the window.

Is there a cross-browser way to stop smooth scrolling with JavaScript?

Site using effect in question: http://capitalismis.com

Relevant (simplified) code:

$doc.on('scroll', function(e)
    {
        $doc.off('scroll');

        window.scrollTo(0, $doc.scrollTop());

        var aniSpeed = 1500 * Math.abs(scrollTop - selected.top) / windowHeight;

        $body
            .stop()
            .animate({scrollTop: selected.top}, aniSpeed, 'easeOutQuad');
     }
);

Answer 1

In short: don’t try to override native scrolling. Every OS and device handles things differently and it’s impossible to predict the different scenarios. There is “hard scrolling” (most Windows versions), “soft scrolling” (≈Mac OS X 10.6+) and browsers that only fire the onscroll event when the scrolling is completely done (iOS). It’s a mess.

Instead of trying to modify the scrolling behavior of the body, I would modify the elements of the page accordingly. Listen to the onscroll-event, and move things around on the web page.

// Capture scroll event
$(window).scroll( function() {

    // Get scroll offset from top
    var scrollTop = $(window).scrollTop();

    // Use it to move elements around on the page (or change backgrounds etc.)
    // Here: move .element in the opposite direction of the scroll
    $('.element').css({
        '-vendor-transform' : 'translate3d(' + (scrollTop*(-1)) + 'px,0,0)'
    });
});