在实现列表项懒加载过程中，遇到因浏览器滚动锚定特性导致的自动滚动问题。此特性为防止页面加载时内容高度变化引发滚动条跳动，但与懒加载冲突，形成死循环。解决方法是在父元素添加overflow-anchor:none属性。
问题
近期在开发时应用列表项懒加载时遇到了一个问题，当根据scrollTop来更新显示的列表项时，滚动事件反复触发，导致列表项不停得更新，滚动条自动由顶部滚动到底部。
分析和解决
最后发现，这个问题跟浏览器滚动锚定滚动锚定有关，这个特性是为了避免在页面加载的过程中，页面内容高度发生变化引起滚动条跳动的问题。开启这个特性后，浏览器会自动触发scroll事件，调整滚动条的位置，让滚动条不胡乱跳动。但是懒加载的时候由于不断更新列表项内部的高度，因此就会使浏览器自动触发滚动事件，而滚动事件又触发懒加载的更新，形成死循环，造成自动滚动的问题。在父元素中添加css属性overflow-anchor:none就正常了。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
