通过css3的锚定滚动属性，实现分页加载时让滚动条不闪动

为了在使用分页加载内容时避免滚动条闪动，可以使用CSS的position: sticky属性结合JavaScript来实现滚动时的平滑滚动。以下是一个简单的示例：

HTML:

<div class="content">
  <!-- 动态加载的内容 -->
</div>
 
<div class="load-more">
  <button onclick="loadMore()">加载更多</button>
</div>

CSS:

.content {
  position: relative;
  height: 500px; /* 根据实际内容高度设置 */
  overflow-y: scroll;
}
 
.load-more {
  position: sticky;
  bottom: 0;
}

JavaScript:

function loadMore() {
  // 模拟加载更多内容
  var content = document.querySelector('.content');
  for (var i = 0; i < 10; i++) {
    var newItem = document.createElement('div');
    newItem.innerHTML = 'Item ' + (content.children.length + 1);
    content.appendChild(newItem);
  }
 
  // 当内容足够多，sticky元素(load-more)将固定在顶部
}

这个示例中，.content 是一个固定高度并且有滚动条的容器，.load-more 是一个sticky定位的元素，它会在用户滚动到页面底部时固定在底部。这样，即使动态加载了新内容，滚动条也不会因为重新计算位置而闪动。