Css 使用带滚动事件的页边距顶部来修复一个div，该div在某些滚动区域中具有相对位置

我试图在用户通过vanillaJS滚动时制作一些动画

我将事件监听器设置为“滚动”，但似乎事件是在滚动结束后触发的。我试图添加一个边距顶部，以便在滚动时移动一些div的速度变慢，或者在一些滚动区域中修复一个div，但由于滚动，它会导致屏幕抖动，并且添加边距顶部不会同时发生

是否可以在滚动事件发生之前侦听它？若否，如何通过向相对div添加保证金顶部而不滞后，将某些div固定到窗口

通过这种方式添加边距顶部在滚动条完成滚动时是完全平滑的，问题发生在我使用鼠标滚轮时

测试


测试


测试


测试


测试


测试


测试


测试


测试


测试

测试

测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试

测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试

const customSticky=document.getElementById（'custom-sticky'）
document.addEventListener（'scroll'，（e）=>{
如果（window.scrollY<200）{
customSticky.style.marginTop=0
}else if（window.scrollY>200&&window.scrollY<2000）{
customSticky.style.marginTop=（window.scrollY-200）+'px'
}否则{
customSticky.style.marginTop=1800
}
})

在尝试了不同的方法后，我明白了如何摆脱震动。 我应该防止鼠标滚轮的默认动作。因为引起震动的唯一原因是用于滚动的浏览器动画。所以我编辑了我的代码如下，问题就解决了

测试


测试


测试


测试


测试


测试


测试


测试


测试


测试

测试

测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试


测试

const customSticky=document.getElementById（'custom-sticky'）
addEventListener（“wheel”，this.handleWheel，{passive:false}）；
功能手柄轮（e）{
滚动窗口（0，e.deltaY>0？56:-56）；
e、 预防默认值（）；
}
document.addEventListener（'scroll'，（e）=>{
如果（window.scrollY<200）{
customSticky.style.marginTop=0
}else if（window.scrollY>0&&window.scrollY<2000）{
customSticky.style.marginTop=（window.scrollY-200）+'px'
}否则{
customSticky.style.marginTop=1800+‘px’
}
})

您能添加一个代码片段吗？@BastienRobert我在问题中添加了一个简单的代码片段，正如您所看到的，使用滚动条会产生平滑的行为，但使用鼠标