1

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

我想复制一个类似于这个网站上的效果。

查询

  $('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

  });
4

3 回答 3

2

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

$('body').mousewheel(function(event, delta, deltaX, deltaY) {
    if($('html').is(':animated') || $('body').is(':animated')) return false;
    // else, do your stuff...
});
于 2013-08-15T22:32:40.897 回答
2

您可以使用下划线 js http://underscorejs.org/ 并执行以下操作：

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

这将在触发回调之前从最后一个鼠标滚轮事件等待 30 毫秒

于 2013-08-15T23:29:41.633 回答
0

这个网站似乎没有使用滚动。它只是移动到一个新的锚点（滚动时观看 url），它是通过向上或向下移动（滚动）鼠标作为触发器触发的，感觉就像是滞后滚动（但实际上，您无法控制方向一旦移动）。您可以使用jqueryanimate来做到这一点。

于 2013-08-15T22:39:08.890 回答