最近我一直在为Angular构建一个树视图组件库,如ngx-tree .
问题
在我想出如何为这个库实现 virtual-scroll feature 以获得大数据集的性能之后不久,并让它在Firefox中正常运行,我被 Blink-included browsers (如Chromium,Chrome,Opera)中的奇怪滚动行为所困 .
演示链接
这是demo plunkr - https://embed.plnkr.co/xMpmK5EBC46tDKpYFpw8请参阅下面的更新#1
情况
-
在Firefox,Edge和IE 11中,我的带有虚拟滚动功能的库可以顺利滚动 .
-
但是,在Chrome和Opera中,当我滚动到树视图内的某些位置时,滚动条的位置(滚动区域的
scrollTop
属性)会上下跳动,导致 flickering 树视图并分解虚拟滚动功能 .
浏览器详细信息版本
-
Chrome - 59.0.3071.115
-
Firefox - 54.0
-
Edge - 40.15063.0.0
其他浏览器
在中国,有一些 shelled 浏览器来自Chromium项目(如360se,QQ浏览器,搜狗浏览器,UC浏览器)和 older version of V8 and blink . 而且他们没有那种奇怪的滚动行为 .
一些假设
它是由Chromium团队对滚动实现进行一些优化(如平滑滚动)引起的吗?
希望得到一些指导! (≧﹏≦)
Update #1
使用事件日志更新演示链接:https://embed.plnkr.co/GpQBZsguhZZOQWWbZnqI/
One must test the scrolling before opening devtool to see the logs
我必须更多地解释虚拟滚动的工作原理以及导致闪烁的原因 .
首先,请参阅design of Virtual Scrolling .
虚拟滚动的一个关键点是,我们创建了一个与该区域大小相同的虚假滚动区域,而没有虚拟滚动检测 . 因此,在最佳情况下,滚动区域的滚动条位置不应改变,直到某些预期事件触发其更改 . 对于滚动事件,我们更新每个动画帧的视图 .
在高度固定的滚动区域内,我们假设一个事实,即如果我们在动画帧中正确模拟那些未渲染元素的高度(可能有 a bit of deviation for the calculation accuracy ),则scrollTop属性不会改变 with a large percentage .
但是,根据我的观察结果,blink系列浏览器似乎执行不同的策略来更新可滚动元素的scrollTop . 更新scrollTop的时机与none-blink-series浏览器不同 . 到目前为止,我已经想到了这一切 .
GIF样本
在这里,我制作了一些GIF来显示Chrome,Firefox和Edge的输出 .
1 回答
你是从
virtual-scroll-demo-branch
分支中提取库的:那个分支是105个提交后面的主人 . 它错误地在其中一个内部元素上设置
margin-top
. 这是fixed in newer versions .编辑:开发人员实际上在他们的commit message中引用了这个Stack Overflow问题 .