javascript - 最新包含 Blink 的浏览器(如 Chrome、Opera)中的奇怪滚动行为

Question

最近我一直致力于为 Angular 构建 TreeView 组件库，如 ngx-tree .

问题

在我弄清楚如何为这个库实现一个虚拟滚动功能以提高大数据集的性能，并让它在 Firefox 中正常运行后不久，我就被一种奇怪的滚动行为所困在 Blink - 包含浏览器(如 Chromium、Chrome、Opera)。

演示链接

Here is the demo plunkr -- https://embed.plnkr.co/xMpmK5EBC46tDKpYFpw8 see Update #1 below

情况

• 在 Firefox、Edge 和 IE 11 中，我的具有虚拟滚动功能的库可以顺利滚动。
• 但是，在 Chrome 和 Opera 中，当我滚动到 TreeView 中的某些位置时，滚动条的位置(即滚动区域的 scrollTop 属性)上下跳动，导致闪烁 TreeView 并分解虚拟滚动功能。

浏览器详细版本

• Chrome - 59.0.3071.115
• 火狐 - 54.0
• 边缘 - 40.15063.0.0

其他浏览器

在中国，有一些加壳浏览器源自Chromium项目(如360se、QQ浏览器、搜狗浏览器、UC浏览器)，旧版本的V8和blink。而且它们没有那种奇怪的滚动行为。

一些假设

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

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

---

更新 #1

Demo link update with event log: https://embed.plnkr.co/GpQBZsguhZZOQWWbZnqI/

在打开 devtool 查看日志之前必须测试滚动

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

首先，查看 design of Virtual Scrolling .

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

在一个高度固定的滚动区域内，我们假设一个事实，即如果我们适本地模拟那些未渲染元素的高度(可能有 >动画帧内的计算精度有点偏差)。

但是，根据我的观察结果，blink 系列浏览器似乎执行不同的策略来更新可滚动元素的 scrollTop。它更新 scrollTop 的时间与非闪烁系列浏览器不同。到目前为止我已经弄清楚了。

---

gif 示例

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

Chrome

火狐

边缘

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。这是 fixed in newer versions .

编辑:开发人员实际上在他们的 commit message 中引用了这个 Stack Overflow 问题.