首页 文章

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

提问于
浏览
57

最近我一直在为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的输出 .

Chrome

Chrome gif

Firefox

Firefox gif

边缘

Edge gif

1 回答

  • 2

    你是从 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问题 .

相关问题