
优化滚动加载,确保滚动流畅
在网页内容滚动到底部自动加载更多内容的场景中,如何避免滚动位置跳动,提升用户体验?
最佳实践:
无需手动保存和恢复滚动位置。 直接将新内容添加到页面即可。 以下代码片段展示了这一方法:
window.addEventListener('scroll', function() {
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
const windowHeight = window.innerHeight;
const documentHeight = document.documentElement.scrollHeight;
if (scrollTop + windowHeight >= documentHeight) {
// 加载更多内容...
}
});
通过这种方式,新内容加载后,页面滚动条会自然平滑地向下移动,避免了不必要的滚动位置调整,从而提供更流畅、更舒适的用户体验。










