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 plete. I tried to set a timeout function and variable to check if the animation is plete 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 (pleted == true) {
      pleted = 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() { pleted = true; });
                //});
            }else {
              $('html, body').stop().animate({
                      scrollTop: thisID.offset().top - 200
                  }, 1000, 'swing' , function() { pleted = 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() { pleted = true; });
          }
          else {
            $('html, body').stop().animate({
                  scrollTop: thisID.offset().top - 200
              }, 1000, 'swing' , function() { pleted = true;  });
          }
          },400);
      }

    };                

      return false; // prevent default

  });

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 plete. I tried to set a timeout function and variable to check if the animation is plete 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 (pleted == true) {
      pleted = 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() { pleted = true; });
                //});
            }else {
              $('html, body').stop().animate({
                      scrollTop: thisID.offset().top - 200
                  }, 1000, 'swing' , function() { pleted = 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() { pleted = true; });
          }
          else {
            $('html, body').stop().animate({
                  scrollTop: thisID.offset().top - 200
              }, 1000, 'swing' , function() { pleted = true;  });
          }
          },400);
      }

    };                

      return false; // prevent default

  });

• javascript
• jquery
• mousewheel

3 Answers 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...
});

You can use underscore js http://underscorejs/ 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

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.