滚动chrome和safari / firefox之间的行为差​​异

时间:2017-09-04 23:40:42

标签: html css google-chrome scroll safari

所以我正在为我的应用程序构建一个渲染系统,它从一个集合中提取对象并通过js模板运行em,以便在滚动页面时创建更多子节点。基本上,它检测何时到达容器的底部并移除顶行的渲染元素,并将一行模板化对象附加到容器的底部,同样反向滚动到顶部。

功能本身不是问题。我已经让它在Chrome中100%工作,但问题始于其他浏览器。在chrome中,它就像容器永远滚动一样,但在safari / firefox中,当滚动到达底部时,新行会被渲染,但滚动停留在底部,所以看起来最后一行不断被下一行替换要渲染的行。

我的问题是如何确定滚动条的运行方式的差异,以便找出解决方案?

1 个答案:

答案 0 :(得分:1)

所以正在发生的差异是chrome有一个他们建立的新功能,称为滚动锚定。他们添加了它,因此添加到页面的新内容不会抖动滚动。它恰好是我正在构建的渲染系统的一个缺失部分,仅在chrome上没有丢失。我在我自己的代码中模拟它正在做的事情,现在它适用于所有其他浏览器。

对于任何好奇的人来说,chrome对该行为有一个css控制,称为overflow-anchor:auto或none;

More info about "Scroll Anchoring"