最新的Blink浏览器（如Chrome，Opera）中的奇怪滚动行为

Question

最近，我一直致力于为Angular构建一个树视图组件库，ngx-tree。

问题

在我想出如何为这个库实现虚拟滚动功能以获得大数据集的性能并让它在Firefox中正常运行后不久，我被一个奇怪的滚动行为困住了在 Blink - 包含浏览器（如Chromium，Chrome，Opera）。

演示链接

  

以下是demo plunkr - https://embed.plnkr.co/xMpmK5EBC46tDKpYFpw8 ，请参阅下面的更新＃1

情况

• 在Firefox，Edge和IE 11中，我的带有虚拟滚动功能的库可以顺利滚动。
• 但是，在Chrome和Opera中，当我滚动到树视图内的某些位置时，滚动条的位置（滚动区域的scrollTop属性）会上下跳动，导致闪烁树视图并细分虚拟滚动功能。

浏览器详细信息版

• Chrome - 59.0.3071.115
• Firefox - 54.0
• Edge - 40.15063.0.0

其他浏览器

在中国，有一些带壳的浏览器来自Chromium项目（如360se，QQ浏览器，搜狗浏览器，UC浏览器），带有旧版本的V8和闪烁。他们没有那种奇怪的滚动行为。

一些假设

是否由Chromium团队对滚动实现进行了一些优化（如平滑滚动）？

希望得到一些指南！ （≧﹏≦）

更新＃1

  

使用事件日志进行演示链接更新：https://embed.plnkr.co/GpQBZsguhZZOQWWbZnqI/

必须先测试滚动，然后再打开devtool才能看到日志

我必须详细解释虚拟滚动的工作原理以及导致闪烁的原因。

首先，请参阅design of Virtual Scrolling。

虚拟滚动的一个关键点是，我们创建一个与该区域大小相同的虚假滚动区域，而不进行虚拟滚动检测。因此，在最佳情况下，滚动区域的滚动条位置不应改变，直到某些预期事件触发其更改。对于滚动事件，我们更新每个动画帧的视图。

在高度固定的滚动区域内，如果我们模拟那些未渲染的元素，我们假设scrollTop属性不会以大百分比更改的事实。高度正确（可能计算精度有点偏差）在动画帧中。

然而，根据我的观察结果，blink系列浏览器似乎执行不同的策略来更新可滚动元素的scrollTop。更新scrollTop的时机与none-blink-series浏览器不同。到目前为止，我已经找到了所有这些。

Gifs样本

在这里，我制作了一些GIF来显示Chrome，Firefox和Edge的输出。

铬

火狐

边

Answer 1

您从virtual-scroll-demo-branch分支机构中拉出了库：

'ngx-tree': 'https://rawgit.com/e-cloud/ngx-tree/virtual-scroll-demo-branch/src/lib',

该分支在主人后面提交了105次。它错误地在其中一个内部元素上设置margin-top。这是fixed in newer versions。

编辑：开发人员实际在他们的commit message中引用了此Stack Overflow问题。