Javascript 修改div时是否取消后续onscroll事件？

我正在尝试创建一个虚拟滚动机制，这样我就可以在大列表中保持DOM的亮度。其思想是，可以从dom中删除主div中不可见的内容（可见视口之前/之后的内容），并替换为用作分隔符的空div。有一个带滚动条的div，其中包含3个div：

• beforeDiv：这是一个空的间隔div。该div中的行位于视口的可见部分之上，因此我们不需要渲染它们
• middleDiv：此div将具有渲染的行
• afterDiv：这是一个空的间隔div。该div中的行位于视口的可见部分下方，因此我们不需要渲染它们

代码段显示了1000行的虚拟滚动。这是我真实代码的一个很小的例子来证明这一点。每10行考虑一个“页面”，每个行都被硬编码到100px高度。我有一个onscroll处理程序，它会检查我是否需要更新3个div以调整前/后div的大小，并更改在中间div中渲染的行。当我们向下滚动时，前div的高度会增加，后div的高度会缩小（这两个div都是空的，主要是间隔div，因此滚动条可以正常工作）

问题就在这里。当我按一次向下箭头滚动时，它实际上会触发onscroll事件几次以实现平滑滚动（运行代码段并按一次向下箭头-您将看到scrolltop一次几像素的变化）。那很好。但是，当我到达“页面”边界时，我调整了before/middle/after div，它似乎取消了后续的滚动。因此，当我到达一个边界时，它不会滚动全部数量，并且看起来非常不稳定。假设事件应该触发5次1px、3px、5px、6px、10px，总共触发25px。它只会在1px内触发一次，随后的滚动被取消。我猜是因为我在修改div的内容

如果按住向下箭头，它相当平滑，但仍然可以看到每10行有一点延迟

有没有办法让滚动更流畅

$（文档）.ready（函数（）{
变量行高度=100；
变量页计数=10；
var数据=[]；
对于（变量i=0；i<1000；i++）{
数据[数据长度]=“索引”+i；
}
功能最小值（n，最小值）{
返回n
#滚动条包装器{
显示：内联块；
宽度：500px；
高度：500px；
溢出：自动；
边框：1px纯黑；
}
.行{
显示：内联块；
高度：100px；
宽度：100%；
边框：1px纯黑；
框大小：边框框；
}
#记录器{
显示：内联块；
高度：500px；
/*宽度：500px*/
溢出：自动；
边框：1px纯黑；
}

所以我发现任何修改scrolltop的东西都会停止滚动惯性。我重新设计了整个组件，以避免设置scrolltop。相反，我只是更新before和after div，以确保视口中的内容正确地保留在视口中。我还发现，当我在dom中添加任何位于scrolltop之上的内容时，它会导致scrolltop发生变化，这就是为什么我在示例代码中有一行代码来调整scrolltop。现在，我按照正确的顺序进行操作，并在添加新内容之前收缩到div之前
 我对脚本进行了一些修改，以便在向下滚动时，它只会不断追加新记录，而不会删除before div元素。有趣的是，只要我不更改before div的高度，问题就不会发生（但是我无法实现以这种方式保持dom灯光的目标）。经过几天的实验，当我修改scrollTop时，后续的滚动事件似乎被取消了。这在某种程度上是有意义的，但这将使设计变得非常复杂，因为最终产品将是在可变大小的行上进行虚拟滚动。为了保持平滑，我需要定期调整scrollTop。在某种解决方案中，我只在用户停止滚动n毫秒后进行调整，这样他们就不会注意到任何东西。