css - 带有滚动条的快速流畅的水平滚动(CSS 加速)

Question

我正在尝试创建一个包含大量图像的水平网页，并且我检查了一些水平滚动条。

所有这些都是基于一个很长的 DIV，当你移动下面的滚动条时，它会改变长 DIV 的“左”位置。

但是我发现了 ThisLife 网站，它有一个非常快速和流畅的水平滚动条，它使用 transform3d 来改变 div 中所有元素的“位置”，而且速度非常快，即使在 div 中有超过 100.000 个图像元素分区。

他们是怎么做到的？

我想知道它是如何完成的，一个非常非常非常长的 DIV(500.000 像素长!)，包含数十万个元素，移动得如此之快和流畅。并且所有这些元素都在滚动条移动时实时更改“transform3d”位置

这里有一段视频可以了解元素的 CSS 属性如何变化，也许可以理解它。 https://vimeo.com/100597987

所以，我正在寻找的是一种 HTML/Javascript(jQuery) 方法来完成一个 DIV 的水平滚动条，其中有数千个元素移动流体，例如，因为其他解决方案(只是移动“左”位置内部有数千个 DOM 元素的长 DIV 非常慢)。

我认为 transform3d 是一种解决方案，但我不知道如何实现。

Answer 1

是的，我认为 translate 3d 是一个很好的解决方案。我之前用 AngularJS 和 css transform 3d 制作了一个简单的 slider 。这里，

Demo

Edit Demo

您可以将其剥离，只需了解我是如何创建它的核心思想，您就可以将其应用到网页上。