chrome 和 safari/firefox 之间的滚动行为差异 [英] Scrolling behavior differences between chrome and safari/firefox
问题描述
所以我正在为我的应用程序构建一个渲染系统，该系统从集合中提取对象并通过 js 模板运行它们以在滚动页面时创建更多子项.本质上，它检测何时到达容器底部并移除渲染元素的顶行，并将一行模板化对象附加到容器底部，同样，但滚动到顶部时相反.
So I'm building a rendering system for my app that pulls objects from a collection and runs em through js templates to create more children while the page is being scrolled. Essentially it detects when the bottom of the container is reached and removes the top row of rendered elements and appends a row of templated objects to the bottom of the container, and likewise but reverse for scrolling to the top.
功能本身不是问题.我让它在 chrome 中 100% 工作，但问题始于其他浏览器.在 chrome 中，就好像容器永远滚动一样，但是在 safari/firefox 中，当滚动到达底部时，会呈现新行，但滚动停留在底部，因此看起来最后一行不断被下一行替换要呈现的行.
The functionality itself isnt an issue. I've got it working 100% in chrome, but the issue starts in other browsers. In chrome, its as if the container scrolls forever, but in safari/firefox when the scroll hits the bottom, the new rows are rendered, but the scroll stays at the bottom so it looks like the last row is constantly being replaced by the next row to render.
我的问题是如何确定滚动操作的差异，以便找出解决方案?
My question is how can I determine the differences of how the scroll is operating so I can figure out a solution?
推荐答案
所以发生的不同是 chrome 有一个他们内置的新功能，称为滚动锚定.他们添加了它，因此添加到页面的新内容不会使滚动条变乱.它恰好是我正在构建的渲染系统的一个缺失部分，它不仅仅在 chrome 上缺失.我在自己的代码中模拟了它的作用，现在它可以在所有其他浏览器上正常工作.
So the difference that was happening was that chrome had a new feature they built in called scroll anchoring. They added it so new content being added to pages would not jerk the scroll around. It just so happened to be a missing piece of the rendering system i was building that wasn't missing only on chrome. I emulated what it was doing in my own code now it works right on all other browsers.
对于任何好奇的人来说，chrome 有一个 css 控件来控制这种行为，称为溢出锚:自动或无；
To anyone curious, chrome has a css control to that behavior called overflow-anchor: auto or none;
这篇关于chrome 和 safari/firefox 之间的滚动行为差异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
