Document

--- theme: smartblue highlight: a11y-dark --- 最近有个类似虚拟列表的需求，但是要求自己滚动。 ![vvv.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d48af529988949aab715df402d919617~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=280&h=392&s=851037&e=gif&f=155&b=000000) # 实现我琢磨了一下，用了以下的方法实现。 - 不管一共有多少数据，每一时刻实际渲染的数据量应该是固定的，我这里用了两屏的数据 - 这里的滚动没有用滚动条，用的是**top**的偏移量来实现，因为我这里的需求只需要自己滚动，不用手动滚动，用滚动条的话，相同的原理，应该也可以实现，但是还要把滚动条隐藏了，麻烦。 - 由于实际的渲染量一定，所以当**top**的偏移量等于一屏数据的高度的时候，应该把**top**的值重置为零，同时要把已经消失在视野的那一屏数据删除，这样的配合下，**top**的改变就不会引起页面的闪动，因为此时的位置下**top**就是等于零。 - 在上面删除了已经看不见的一屏数据的时候，就一定要在下面添加上新的一屏数据，这样，就能保证页面上始终有且只有两屏数据，也能确保滚动的这个效果。 - 最后一屏结束的时候，要从队首拿数据补上，实现无缝衔接，循环滚动。 # 优化项 - 给页面中元素添加子元素的时候，没有直接添加，而是用的**createDocumentFragment**，能减少元素的插入次数 - 这里的滚动走的不是**setTimeout**,而是用的**requestAnimationFrame** # 效果 ![vv.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/eeae7aec46a94ef38f49868b6375f52c~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1080&h=450&s=2422566&e=gif&f=235&b=fcfafe) 这里可以看见，容器的**top**值一直在变动，同时里面的两个子元素也是动态变化的。 # 代码 ```js Document

```