javascript - 图片列表网页滚动不流畅

Question

我正在尝试创建一个像谷歌照片一样 Angular 图像列表网站。我有一个自定义滚动条，其中列出了月份和年份。当用户移动滚动 slider 时，图像列表应该滚动。我写过，

scrollContainer = document.getElementById("photosContainer");
scrollContainer.scrollTop += 20;

并且mousemove事件将触发上述代码。大约有 5000 个 img 标签，出于测试目的，src 只是硬编码的头像图标。因此滚动时图像不会发生任何变化。

 onmousemove(){
  this.scrollThumbPosition = <value>;
}

这将移动滚动条 slider 。如果图像数量最多为 1000 张，滚动条和一切都可以正常工作。但是当图像数量超过 1000 张时，

1. 拖动时滚动 slider 不会移动。
2. 图像列表不会移动。

但是当触发 mouseup 操作时，Ui 会做出响应。有没有办法让带有大量图像标签的页面的性能变得平滑？

Answer 1

您尝试过简单的 CSS 解决方案吗？ (编辑:感谢 lucifer63 添加了 will-change:scroll-position)。

html {
  scroll-behavior: smooth;
  will-change: scroll-position;
}

scroll-behavior: smooth礼貌地要求浏览器平滑自动滚动(即不是用户滚动)

will-change: scroll-position让浏览器知道预计性能会受到哪些影响。如果您仍然遇到问题，它只能作为最后的手段。

编辑:

或者，如果您想要纯 JS 方法，您可以使用 window.scroll() 函数:

window.scrollBy({ 
  top: 20,
  left: 0, 
  behavior: 'smooth' 
});

``