CODEWITHSUNDEEP
javascriptjqueryscroll
James
James

Reputation: 784

Custom Scrolling in Js & jQuery : One scroll event

I'm currently listening for scrollevents in jQuery, using the following code:

$(window).on('wheel', function(e) {

   var delta = e.originalEvent.deltaY;

   if (delta > 0) //do something
   else //do something else
});

The issue I'm having is that when the user scrolls, lots of wheel events are fired.

I want each time the user scrolls to only process the first scroll event.

I.E.: I only want to process the first wheel event and then stop listening/processing them until the user stops scrolling. At this point I want to start listening again so I can handle the next scroll.

I've seen mousewheel DOMMouseScroll used rather than .on('wheel') but don't know enough about the differences to know if that could help.

Cheers, James

Upvotes: 0

Views: 576

Answers (1)

Dan Nagle
Dan Nagle

Reputation: 5425

You can use the jQuery debounce plugin to rate limit your function. The following code will limit the callback to executing once every 250ms.

  $(window).scroll($.debounce(250, true, function(){
    console.log('Scrolling!');
  }));

It's also possible to use the Lodash or Underscore libraries as they also have a debounce function.

Upvotes: 1

Related Questions