JQuery - bind event in scroll mode

Question

If I want to bind an event on a page scroll, I can use scroll(); .

But how to fire when scroll() ends?

I would like to reproduce this:

  $(window).scroll(function(){ //do somenthing }); $(window).scrollSTOPPED(function(){ //--> when i'm scrolling then i stop to scrolling (so NOT when page scrollbar is at the end top or bottom :) //do somenthing else }); 

any ideas?

Answer 1

tiny jquery way

 $.fn.scrollStopped = function(callback) { var that = this, $this = $(that); $this.scroll(function(ev) { clearTimeout($this.data('scrollTimeout')); $this.data('scrollTimeout', setTimeout(callback.bind(that), 250, ev)); }); }; 

250 ms after the last scroll event, this will trigger the scrollStopped callback.

http://jsfiddle.net/wtRrV/256/

Lodash (even smaller)

 function onScrollStopped(domElement, callback) { domElement.addEventListener('scroll', _.debounce(callback, 250)); } 

http://jsfiddle.net/hotw1o2j/

pure JS (technically the smallest)

 function onScrollStopped(domElement, callback, timeout = 250) { domElement.addEventListener('scroll', () => { clearTimeout(callback.timeout); callback.timeout = setTimeout(callback, timeout); }); } 

https://jsfiddle.net/kpsxdcv8/15/

strange fact

The clearTimeout and clearInterval parameters need not be specified and may even be of the wrong type or even omitted.

http://jsfiddle.net/2w5zLwvx/

Answer 2

the event itself does not exist, since scrolling is one event that is fired every time a user scrolls with a certain step.

However, you can emulate an event.

Credit to James Padolsi for this, taken from his web page :. Read it here to fully understand the code and how it is implemented.

http://james.padolsey.com/javascript/special-scroll-events-for-jquery/

(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) ); } }; })(); 

It may be worth noting that there are several issues related to yours, so this might be a possible duplication. e.g. Javascript: perform action after scrolling user and Fire event after scrolling scrollbars or mouse wheel using javascript

Answer 3

You can check if window.scrollY == 0

 $(window).scroll(function(){ if (window.scrollY == 0) { //... } }); 

But this event will be fired in every scroll.

Answer 4

I prefer to listen to the event. This is what I do:

Jquery plugin:

 +function(jQuery){ var scrollStopEventEmitter = function(element, jQuery) { this.scrollTimeOut = false; this.element = element; jQuery(element).on('scroll', $.proxy(this.onScroll, this)); } scrollStopEventEmitter.prototype.onScroll = function() { if (this.scrollTimeOut != false) { clearTimeout(this.scrollTimeOut); } var context = this; this.scrollTimeOut = setTimeout(function(){ context.onScrollStop()}, 250); } scrollStopEventEmitter.prototype.onScrollStop = function() { this.element.trigger('scrollStop'); } jQuery.fn.scrollStopEventEmitter = function(jQuery) { return new scrollStopEventEmitter(this, jQuery); }; }($); 

In this case, the window now raises the scrollStop event

 $(window).scrollStopEventEmitter($); 

Now I can listen to scrollStop

 $(window).on('scrollStop',function(){ // code