最新的Blink浏览器(如Chrome,Opera)中的奇怪滚动行为

最近我一直在为Angular构建一个树视图组件库,作为ngx-tree.

问题

在我想出如何为这个库实现虚拟滚动功能以获得大数据集的性能并让它在Firefox中正常运行之后不久,我就陷入了Blink -included浏览器中的奇怪滚动行为(如Chromium,Chrome) ,Opera).

这是演示插件 - ~~https://embed.plnkr.co/xMpmK5EBC46tDKpYFpw8~~ 请参阅下面的更新#1

在Firefox,Edge和IE 11中,我的带有虚拟滚动功能的库可以实现平滑滚动.
但是,在Chrome和Opera中,当我滚动到树视图内的某些位置时,滚动条的位置(这是scrollTop滚动区域的属性)上下跳动,导致闪烁的树视图并打破虚拟 -滚动功能.

在中国,有一些带有Chromium项目的外壳浏览器(如360se,QQ浏览器,搜狗浏览器,UC浏览器)和旧版本的V8和blink.而且他们没有那种奇怪的滚动行为.

它是由Chromium团队对滚动实现(如平滑滚动)的一些优化引起的吗？

希望得到一些指导!(≧﹏≦)

更新#1

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

必须在打开devtool之前测试滚动才能看到日志

我必须更多地解释虚拟滚动的工作原理以及导致闪烁的原因.

首先,请参阅虚拟滚动的设计.

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

在高度固定的滚动区域内,如果我们在动画中正确模拟那些未渲染元素的高度(计算精度可能有一点偏差),我们假设一个事实是scrollTop属性不会以很大的百分比变化.帧.

但是,根据我的观察结果,blink系列浏览器似乎执行不同的策略来更新可滚动元素的scrollTop.更新scrollTop的时机与none-blink-series浏览器不同.到目前为止我所知道的一切.

在这里,我制作了一些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',

该分支比 master 落后 105 次提交。它错误地设置margin-top在内部元素之一上。这在较新的版本中已得到修复。

编辑：开发人员实际上在他们的提交消息中引用了这个 Stack Overflow 问题。