如何使用Javascript/Jquery检测滚动何时开始？

我想创建一个单页网站，不使用任何第三方库，比如FullPage.js

• 当scroll启动-->而不是等待自然滚动结束时，我希望它不起作用（因此鼠标不会导致可见滚动），而是运行我的代码。（所以它总是可以转到下一节或上一节，而不依赖于用户滚动的数量）

你知道我怎样才能做到这一点吗？我的代码片段等待滚动的结束，然后跳转到它应该跳转的地方，所以它没有按预期工作

（第一部分有一个“current”类，然后代码段通过添加/删除该类来操作100vh部分）

您可以在下面或此处看到我正在使用的代码段：

非常感谢您的帮助，祝您愉快

var script = document.createElement('script');script.src = "https://code.jquery.com/jquery-3.4.1.min.js";document.getElementsByTagName('head')[0].appendChild(script);
var timerId;
var scrollableElement = document.body; //document.getElementById('scrollableElement');

scrollableElement.addEventListener('wheel', checkScrollDirection);

function checkScrollDirection(event) {
    var $current = $('.current');
  if (checkScrollDirectionIsUp(event)) {
    console.log('UP');
$prev = $current.prev();

            if ($prev.length) {

                clearTimeout(timerId);
                timerId = setTimeout(function(){
                    $current.removeClass('current');
                    $prev.addClass('current');    
                    $('body,html').animate({
                        scrollTop: $('.current').offset().top
                    }, 100);         
                }, 100) 
            }




  } else {
    console.log('Down');
$next = $current.next();

            if ($next.length) {
                clearTimeout(timerId);
                timerId = setTimeout(function(){
                    $current.removeClass('current');
                    $next.addClass('current');
                    $('body,html').animate({
                        scrollTop: $('.current').offset().top
                    }, 100);         
               } , 100) 
            }

  }
}

function checkScrollDirectionIsUp(event) {
  if (event.wheelDelta) {
    return event.wheelDelta > 0;
  }
  return event.deltaY < 0;
}

var script=document.createElement（'script'）；script.src=”https://code.jquery.com/jquery-3.4.1.min.js";document.getElementsByTagName（'head'）[0].appendChild（脚本）；
var-timerId；
var scrollableElement=document.body//getElementById（'scrollableElement'）；
scrollableElement.addEventListener（'wheel'，checkScrollDirection）；
功能检查滚动方向（事件）{
变量$current=$（'.current'）；
如果（检查滚动方向（事件））{
console.log（'UP'）；
$prev=$current.prev（）；
如果（$prev.length）{
清除超时（timerId）；
timerId=setTimeout（函数（）{
$current.removeClass（'current'）；
$prev.addClass（“当前”）；
$（'body，html'）。设置动画({
scrollTop:$（'.current'）.offset（）.top
}, 100);         
}, 100) 
}
}否则{
console.log（'Down'）；
$next=$current.next（）；
如果（$next.length）{
清除超时（timerId）；
timerId=setTimeout（函数（）{
$current.removeClass（'current'）；
$next.addClass（'current'）；
$（'body，html'）。设置动画({
scrollTop:$（'.current'）.offset（）.top
}, 100);         
} , 100) 
}
}
}
功能检查向上（事件）{
if（事件轮三角洲）{
返回event.wheeldta>0；
}
return event.deltaY<0；
}

您需要的是限制事件侦听器，即每个时间段仅限制一次函数调用

您的代码所做的本质上是去抖动，即仅在等待时间过后才限制函数调用

首先，扔掉你正在使用的计时器。您需要以某种方式阻止滚动不止一次。但是，如果使用JavaScript部分时有一个警告：它会在时间段结束后通过后续事件。幸运的是，它的去抖动方法接受了第三个参数，它给出了您想要的行为：

scrollableElement.addEventListener(
“轮子”，
_.debounce（checkScrollDirection，200，true）//立即调用函数\u一次_
);

第三个参数使去抖动函数的行为类似于节流函数，即它只会触发一次，同时会立即触发

因此，假设您的事件处理程序现在没有原始超时

功能检查滚动方向（事件）{
变量$current=$（“.current”）；
如果（检查滚动方向（事件））{
控制台。登录（“UP”）；
$prev=$current.prev（“节”）；
如果（$prev.length）{
$current.removeClass（“当前”）；
$prev.addClass（“当前”）；
$（“body，html”）.animate(
{
scrollTop:$prev.offset（）.top
},
100
);
}
}否则{
控制台。登录（“关闭”）；
$next=$current.next（“节”）；
如果（$next.length）{
$current.removeClass（“当前”）；
$next.addClass（“当前”）；
$（“body，html”）.animate(
{
scrollTop:$next.offset（）.top
},
100
);
}
}
}

顺便说一句，试着养成在

.next（）

和

.prev（）

中指定选择器的习惯，因为jQuery将匹配所有可能的同级，这很可能是您不想要的。在这种情况下，codepen会附加

元素，jQuery也会匹配这些元素

现在，如果您尝试此操作，您会注意到窗口仍然会响应每个滚动事件。滚动事件是无法取消的事件之一，因此需要通过CSS禁用它

最简单的方法是隐藏

正文的溢出

body{最大高度：100vh；溢出：隐藏；}

就这样。您可能需要调整油门等待时间以匹配您的偏好

您可以在此处找到代码笔的工作版本：
您需要的是限制事件侦听器，即每个时间段仅限制一次函数调用

您的代码所做的本质上是去抖动，即仅在等待时间过后才限制函数调用

首先，扔掉你正在使用的计时器。您需要以某种方式阻止滚动不止一次。但是，如果使用JavaScript部分时有一个警告：它会在时间段结束后通过后续事件。幸运的是，它的去抖动方法接受了第三个参数，它给出了您想要的行为：

scrollableElement.addEventListener(
“轮子”，
_.debounce（checkScrollDirection，200，true）//立即调用函数\u一次_
);

第三个参数使去抖动函数的行为类似于节流函数，即它只会触发一次，同时会立即触发

因此，假设您的事件处理程序现在没有原始超时

功能检查滚动方向（事件）{
变量$current=$（“.current”）；
如果（检查滚动方向（事件））{
控制台。登录（“UP”）；