当滚动动画发生时禁用滚动

Question

我想在用户向上或向下移动鼠标滚轮时按下关键字箭头或移动侧面的滚动条来创建滚动动画。

这与我发现的on this site非常相似。由于我没有找到任何jQuery插件，所以我试图通过自己的方式来重现它，并且我在滚动行为方面遇到了一些麻烦。

当滚动动画发生时，您仍然可以使用鼠标滚轮进行滚动，并且它会使运动看起来很丑陋，上下运动一段时间。

这里是我的小提琴，你可以检查一下：http://jsfiddle.net/k4rsN/1/

的问题是，滚动不禁止，我可以检查自己是否向上或向下滚动之前，该网站已经滚动了一下（运动轮子或关键字）。因此，我相信解决这个问题的方法是禁用滚动效果，让我决定在用户​​决定滚动时应该怎么做。

我一直在看像this或this这样的帖子，但它不能解决我的问题。

这是我到目前为止已经完成，你可以在the fiddle看到：

var lastScrollTop = 0; 
var isMoving = false; 

$(window).scroll(function() { 
    var currentScroll = $(window).scrollTop(); 

    //scrolling down? 
    if (currentScroll > lastScrollTop && !isMoving) { 
     var value = '#link2'; 
    } 
    //scrolling up? 
    else if (!isMoving) { 
     var value = '#link1'; 
    } 

    lastScrollTop = currentScroll; 

    //animation 
    if (value && !isMoving) { //if theres any # 
     isMoving = true; 

     dest = $(value).offset(); 

     $('html, body').animate({ 
      scrollTop: dtop 
     }, 1200, function() { 

      //setting the flag to avoid checking the scrolling when performing the animation 
      isMoving = false; 
     }); 
    } 
}); 

感谢。

Answer 1

在函数的开始处，您可以应用一些CSS属性使其不可滚动。然后在动画结束时将其恢复正常。例如：

在你的开头动画

$('html, body').css({ 
    'overflow': 'hidden', 
    'height': '100%' 
}) 

然后，然后结束

$('html, body').css({ 
    'overflow': 'auto', 
    'height': 'auto' 
}) 

，这几乎是同样的事情，这样的回答：https://stackoverflow.com/a/17293689/2247151