Javascript HTML-如何滚动整个部分而不在中间停止？ 我需要完成的是：

我的网站由几个部分组成，每个部分占据整个页面。当用户尝试向下滚动时，我尝试完成的是：

在滚动达到某个速度阈值之前，页面根本不会移动

当滚动达到阈值时向下滚动整个页面

示例网站：

• （跳过介绍）

我尝试的是：

CSS

scroll snap align

：此方法仅在用户停止滚动后捕捉滚动

示例代码：

第1页内容
第2页内容

---

这里需要注意的第一件事是不能取消

滚动

事件。因此，只能通过在

wheel

或

mouseweel

事件上附加事件侦听器来完成（

touchmove

如果还需要触摸屏支持）

通过使用这些，我能够想出这个。这里的想法是维护一个计数器，它将在每个

控制盘

事件上增加/减少其值。如果计数器达到某个阈值，将触发滚动功能。停止鼠标滚轮后，计数器将重置回0，N毫秒数

因此，为了触发滚动功能，必须转动鼠标滚轮一定次数，以在N毫秒的时间限制内达到阈值

这种方法的缺点是，

body

元素被赋予了

overflow:hidden

属性来隐藏滚动条。否则，用户将能够滚动页面而不产生预期效果。如果这不是问题，则可以删除

溢出

属性。 此外，本例中不处理

touchmove

事件，但其实现也将类似

$（文档）.ready（函数（）{
const COUNTER_THRESHOLD=5；//将其更改为降低/增加感光度
常数计数器重置持续时间=400；
设动画=假；
设计数器=0；
函数resetDelta（）{
计数器=0
}
让deboucncedReset=debounce（重置增量，计数器重置持续时间）；
函数handleScroll（事件）{
//event.wheelDelta可以是正的，也可以是负的，具体取决于滚动的方向
计数器+=1*（数学符号（事件三角洲））；
//若计数器值为负值且绝对值大于阈值，则向下滚动
如果（！动画&&（Math.abs（计数器）>=计数器_阈值）&&counter<0）{
让targetSection=$（'section.active'）。下一步（'section'）；
if（目标截面长度）{
滚动部分（目标部分）；
}
}
//如果计数器值为正值且绝对值大于阈值，则向上滚动
否则，如果（！动画和（Math.abs（计数器）>=计数器\u阈值）和计数器>0）{
设targetSection=$（'section.active'）.prev（'section'）；
if（目标截面长度）{
滚动部分（目标部分）；
}
}
//防止鼠标滚轮的默认滚动行为
event.preventDefault（）
//停止鼠标滚轮后，将计数器重置为0，400毫秒
deboucncedReset（）
}
函数scrollToSection（目标）{
动画=真；
$（'html，body'）。设置动画({
scrollTop:target.offset（）.top
}，800，函数（）{
动画=假；
$（'section.active'）.removeClass（'active'）；
target.addClass（'active'）；
});
}
函数去抖动（函数，延迟）{
让我们去BounceTimer
返回函数（）{
const context=this
常量args=参数
clearTimeout（去BounceTimer）
脱盎司计时器
=设置超时（（）=>函数应用（上下文，参数），延迟）
}
}
//对被动侦听器的测试支持
让supportsPassive=false；
试一试{
让options=Object.defineProperty（{}，'被动'{
get:function（）{
supportsPassive=true；
}
});
addEventListener（“testPassive”，null，选项）；
removeEventListener（“testPassive”，null，options）；
}捕获（e）{}
让wheelOptions=supportsPassive{
被动：错误
}：假；
//旧浏览器使用“鼠标滚轮”事件
在document.createElement（'div'）？'wheel'：'mousewheel'；
文件。添加的事件列表（wheelEvent、handleScroll、wheelOptions）；
});
正文{
溢出：隐藏；
}
#应用程序{
高度：100vh；
}
部分{
位置：相对位置；
宽度：100%；
身高：100%；
}

第一节
我的同僚们都是精英。多洛丽丝说，不应该坐在办公室里，因为这是一种自然状态，而应该是一种责任感，而不是一种责任感。官员，
什么是暂时的智慧，什么是不含铜盐的溶液？假设勃朗地提斯是一名工人，他认为这是一项具有崇高人格的职业
这是一个很好的例子，它的别名是doloribus ut quis，意思是dolorum dolores harum unde magni。共同的区别、共同的原则、共同的义务、共同的义务、共同的义务、共同的义务、共同的义务、共同的义务、共同的义务、共同的义务、共同的义务、共同的义务、共同的义务、共同的义务、共同的义务、共同的义务、共同的义务、共同的义务、共同的义务、共同的义务

第二节
Lorem ipsum dolor坐在amet Concertetur，告别精英。驱虫剂，驱虫剂，驱虫剂，驱虫剂，驱虫剂。我的脸上有一个错误！放在沃鲁帕特山沃鲁帕特山上。
暂时性的、暂时性的、暂时性的、不负责任的、不负责任的、不负责任的发明人减去多洛雷姆·莫迪·埃乌斯！不动产的差别待遇？关于eligendi的权利
圣母维塔酒店。Eius减去recusandae quaerat。福加发明人临时财产来源于官方
#app
{
    height: 100vh;
}

section
{
    position: relative;
    width: 100%;
    height: 100%;
}

<a href="#abrr">hello</a>
<p> long text </p>
<p> another section </p>
<p id="abrr"> last section where we have to go </p>