Question

我在这里得到了这段代码：

$(document).ready(function()
{
    $("#nav_items > p:first-child").click(function()
    {
        $('html,body').animate(
        {
            scrollTop: $('#main_div').offset().top
        }, 500);
    });
    $("#nav_items > p:last-child").click(function()
    {
        $('html,body').animate(
        {
            scrollTop: $('#about_us').offset().top
        }, 800);
    });
});

在元素（p）上单击它将文档滚动到#main_div或#about_us元素。如果我开始使用鼠标滚轮滚动，如何阻止它继续滚动？

Answer 1

您可以收听mousewheel事件并使用stop方法：

$(window).on('mousewheel', function() {
   $('body, html').stop();
});

Answer 2

这是一种方法，结合$(window).scroll()和$('body').on('mousewheel')的使用，将演示如何做你想做的事情：

jsFiddle Demo

var scrollPause = 0;

menuItems.click(function(e){
   var href = $(this).attr("href"),
      offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
   scrollPause = 1;
   $('html, body').stop().animate({ 
      scrollTop: offsetTop
   }, 300, function(){
       setTimeout(function(){
           scrollPause = 0;
       },5000);
   });
  e.preventDefault();
});

$('body').on({
    'mousewheel': function(e) {
        if (scrollPause == 0) return;
        e.preventDefault();
        e.stopPropagation();
    }
})

注意：

在jsFiddle中，sp div用于直观显示scrollPause变量的状态
单击顶部菜单项后，scrollPause设置为0（禁止滚动），并且在暂停8秒后使用setTimeout重新启用它。因此，在滚动到元素之后，鼠标滚轮滚动将被禁用8秒钟。

防止在某些事件上进一步制作动画

2 个答案: