滚动加载内容如何避免页面闪烁？

优化滚动加载，消除页面闪烁

在实现无限滚动加载更多内容时，维持滚动位置是用户体验的关键。 直接操作滚动条位置容易导致页面闪烁。 为了避免这个问题，建议采用一种更平滑的加载方式，无需记录和恢复滚动位置。

以下代码示例展示了如何实现这种无闪烁的滚动加载：

const contentContainer = document.getElementById('content-container');

// 监听滚动事件
contentContainer.addEventListener('scroll', () => {
  // 判断是否滚动到底部
  if (contentContainer.scrollTop + contentContainer.clientHeight >= contentContainer.scrollHeight) {
    // 加载更多内容
    loadNextPage();
  }
});

此方法通过监听滚动事件，在接近页面底部时触发加载更多内容的操作，避免了直接操作滚动条位置，从而有效地防止了页面闪烁。 加载新内容后，页面滚动位置自然保持不变，提供更流畅的用户体验。