Temporarily Disable OSX Safari Inertia Scrolling

Vote count:

0

When scrolling a DIV in safari it applies some degree of momentum to it. The trouble is that when the DIV reaches the top or bottom and stops suddenly it continues to fire whatever event it is that triggers momentum.

For example if I tell the DIV that if its scrollTop position == 0 to jump to ScrollTop position 100, the momentum continues and its starts scrolling up.

Is there a way to prevent this when the DIV reaches a position and then allow it again once we know the momentum has ended.

I have set up a FIDDLE where you can see what I mean. At the moment there moment I prevent the default action of the mouse wheel for one second if the DIV reaches the top or bottom.

http://ift.tt/1E9GZB7

    function prevent_mousewheel(elem){
            $(elem).on('mousewheel',function(e){
                e.preventDefault();
            });
        window.setTimeout(function(){
            $(elem).unbind('mousewheel');
        },1000);
    }

$('.scroll').scroll(function() {
    var scroll = this;
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {

        if($(scroll).scrollTop() <= 0){

            $(scroll).scrollTop(100);

            prevent_mousewheel(scroll);

        }
    }, 100));
});

asked 1 min ago

Robin Knight

3,610

Temporarily Disable OSX Safari Inertia Scrolling