Html 使用滚动捕捉时延迟

我尝试使用滚动捕捉在每个部分之间滚动，并使该部分适合视图。但是，当我滚动和部分捕捉时会有某种延迟。这很奇怪，因为如果我将完全相同的代码放入代码笔（或下面的代码片段），延迟就不会发生。当我使用codepen时，为了更加具体，我的滚轮的每一步都会滚动到一个新的部分。但是，当我不使用codepen，只运行html文件时，滚动捕捉仅在我停止滚动时发生，或者如果我向下或向上滚动一步，它将捕捉，但只有在感觉到750ms延迟后才会捕捉。任何帮助都将不胜感激

*{
框大小：边框框；
}
身体{
保证金：0；
字体系列：“Helvetica”，无衬线；
}
/*所有的抓拍的东西*/
.滚动容器{
高度：100vh；
溢出y：滚动；
过卷行为：包含；
滚动捕捉类型：y必填；
}
部分{
高度：100vh；
滚动捕捉对齐：居中；
}
/*其他风格*/
部分{
填充：1rem；
显示器：flex；
对齐项目：居中；
证明内容：中心；
背景颜色：darkorchid；
}
截面：第n个子（2n）{
背景颜色：青绿色；
}
部分：第n个孩子（3n）{
背景色：番茄；
}

第一节
第二节
第三节
第四节