Last Updated: February 25, 2016
·
18.2K
· barbagallo

jQuery Events for Start/Stop Scrolling

The plugin below can be dropped into its own file and included into your page, then used with JQ.

/**
 * Adds support for the special browser events 'scrollstart' and 'scrollstop'.
 */

(function(){

    var special = jQuery.event.special,
        uid1 = 'D' + (+new Date()),
        uid2 = 'D' + (+new Date() + 1);

    special.scrollstart = {
        setup: function() {

            var timer,
                handler =  function(evt) {

                    var _self = this,
                        _args = arguments;

                    if (timer) {
                        clearTimeout(timer);
                    } else {
                        evt.type = 'scrollstart';
                        jQuery.event.handle.apply(_self, _args);
                    }

                    timer = setTimeout( function(){
                        timer = null;
                    }, special.scrollstop.latency);

                };

            jQuery(this).bind('scroll', handler).data(uid1, handler);

        },
        teardown: function(){
            jQuery(this).unbind( 'scroll', jQuery(this).data(uid1) );
        }
    };

    special.scrollstop = {
        latency: 300,
        setup: function() {

            var timer,
                handler = function(evt) {

                    var _self = this,
                        _args = arguments;

                    if (timer) {
                        clearTimeout(timer);
                    }

                    timer = setTimeout( function(){

                        timer = null;
                        evt.type = 'scrollstop';
                        jQuery.event.handle.apply(_self, _args);

                    }, special.scrollstop.latency);

                };

            jQuery(this).bind('scroll', handler).data(uid2, handler);

        },
        teardown: function() {
            jQuery(this).unbind( 'scroll', jQuery(this).data(uid2) );
        }
    };

})();

5 Responses
Add your response

what we can do with this ?

over 1 year ago ·

@modaloda try it out :) it's for capturing begin and end scroll events.

over 1 year ago ·

// Seriously?

var TO = false;
var scroll_static = true;

$(window).scroll(function(){

if( scroll_static ){
    console.log('start scrolling');
    scroll_static = false;
}

if(TO !== false){ clearTimeout(TO); }           
TO = setTimeout(myfunction, 200); 

});

function myfunction(){

scroll_static = true;
console.log('stopped scrolling');

}

</code></pre>

200 is trigger offset time.

over 1 year ago ·

Woah, seriously bro? Drop your code into a browser and see if it works.

You should test your shit before trolling someone elses.

over 1 year ago ·

how to use this plugin?
i need to put some css over scroll start and scrollstop events.

over 1 year ago ·