Question

我使用鼠标滚轮和航点插件滚动页面的各个部分;我遇到的问题是当我使用苹果强大的鼠标滚动时，滚动过于敏感，当动画完成时，函数会被触发一次以上。我试图设置一个超时函数和变量来检查动画是否完整但这些都没有起作用。

我想复制类似于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

  });

Answer 1

我不知道这是做什么的：indexPos = thisID.index('section');但在做任何事情之前，我会检查是否已经有任何进展：

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

Answer 2

您可以使用下划线js http://underscorejs.org/ 并做这样的事情：

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

这将在触发回调

之前等待最后一次鼠标轮事件的30 ms

Answer 3

这个网站似乎没有使用滚动。它只是移动到一个新的锚点（滚动时观察网址），这是通过向上或向下移动（滚动）鼠标触发的，触发感觉像是滞后滚动（但事实上，你无法控制方向一旦它移动）。您可以使用jquery animate来执行此操作。

延迟鼠标滚轮功能

3 个答案: