Delay mousewheel function

Question

I'm using the mousewheel and waypoints plugin to scroll sections of my page; The problem I am having is when I scroll using the apple mighty mouse the scrolling is too sensitive and the function gets triggered more then once when the animation is complete. I tried to set a timeout function and variable to check if the animation is complete but neither of these worked.

I would like to replicate an effect similar to the one on this website.

JQUERY

  $('body').mousewheel(function(event, delta, deltaX, deltaY) {

  clearTimeout(interval);

  console.log('test');

    $('section').waypoint(function(direction){
      thisID = $(this);
    },{ offset: '350' });

    indexPos = thisID.index('section');

    if (completed == true) {
      completed = false;

      var interval = "";
      if (delta > 0) {
          interval = setTimeout(function(){
            if ($(this).not(":first-child")) { 
              //$(this).animate(function(){
                  $('html, body').stop().animate({
                      scrollTop: thisID.prev().offset().top - 200
                  }, 1000, 'swing' , function() { completed = true; });
                //});
            }else {
              $('html, body').stop().animate({
                      scrollTop: thisID.offset().top - 200
                  }, 1000, 'swing' , function() { completed = true;  });
            }
          },400);
        }
      else if (delta < 0) {
        interval = setTimeout(function(){
        if ($(this).not(":first-child")) { 
            $('html, body').stop().animate({
                  scrollTop: thisID.next().offset().top - 200
              }, 1000, 'swing' , function() { completed = true; });
          }
          else {
            $('html, body').stop().animate({
                  scrollTop: thisID.offset().top - 200
              }, 1000, 'swing' , function() { completed = true;  });
          }
          },400);
      }

    };                

      return false; // prevent default

  });

Hugo Silva · Accepted Answer · 2013-08-15T22:52:30.813

3

I don't know what this is doing: indexPos = thisID.index('section'); but before doing anything, I would check if ins't anything in progress already:

$('body').mousewheel(function(event, delta, deltaX, deltaY) {
    if($('html').is(':animated') || $('body').is(':animated')) return false;
    // else, do your stuff...
});

edited Aug 15 '13 at 22:52

answered Aug 15 '13 at 22:32

Hugo Silva

6,748
3
25
42

score 2 · Answer 2 · answered Aug 15 '13 at 23:29

You can use underscore js http://underscorejs.org/ and do something like this:

$('body').mousewheel(_.debounce(function() {
   //handle the mouse wheel event in here
}, 30)

This will wait for 30 ms from the last mousewheel event before firing the callback

score 0 · Answer 3 · edited May 23 '17 at 11:56

0

This website doesn't seem to use scrolling. It merely moves to a new anchor (watch the url when scrolling) which is triggered by moving (scrolling) your mouse up or down as a trigger which feels like lagged scrolling (but in fact, you don't have any control over the direction once it moves). You can use jquery animate to do that.

edited May 23 '17 at 11:56

Community

1
1

answered Aug 15 '13 at 22:39

orange

7,755
14
75
139

Delay mousewheel function

3 Answers3