列表懒加载滚动scroll事件不断自动触发问题

问题

近期在开发时应用列表项懒加载时遇到了一个问题,当根据scrollTop来更新显示的列表项时,滚动事件反复触发,导致列表项不停得更新,滚动条自动由顶部滚动到底部。

分析和解决

最后发现,这个问题跟浏览器滚动锚定滚动锚定有关,这个特性是为了避免在页面加载的过程中,页面内容高度发生变化引起滚动条跳动的问题。开启这个特性后,浏览器会自动触发scroll事件,调整滚动条的位置,让滚动条不胡乱跳动。但是懒加载的时候由于不断更新列表项内部的高度,因此就会使浏览器自动触发滚动事件,而滚动事件又触发懒加载的更新,形成死循环,造成自动滚动的问题。在父元素中添加css属性overflow-anchor:none就正常了。

发布了251 篇原创文章 · 获赞 99 · 访问量 24万+

猜你喜欢

转载自blog.csdn.net/zjw_python/article/details/105270137