大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心！
最近有一个需求，需要在页面中做一个垂直方向的无限滚动，效果基本为如下，这个滚动是一直在持续的，不断循环。
这个效果挺有意思的，实现起来不难，所以分享一下！
首先准备一下基础的页面，之所以给容器设置 overflow:hidden 是为了把滚动条给去掉，因为我们并不需要滚动条。
图片
可以看出有些项是不在容器可视范围内的，且每一项的高度是 22px（每一项的高度可以自己定，我这里就用 22px 来进行示范）。
图片
接下来得让这个容器滚动起来，那要怎么滚动呢？可以使用 scrollTo 这个方法来进行滚动~并且为了持续保持滚动，可以使用 requestAnimationFrame 来不断进行。
每次都对 top 进行递增，保证容器不断向上滚动。
图片
但是我们可以看到，虽然top 一直在递增，但是滚动到最后就不动了！这是因为这个时候已经滚动到最底部了，那么自然就滚动不了了。
图片
上面为啥滚到底部就滚不动了呢？因为到最底部了，所以滚不动了呀！
那么想要永远滚不完应该怎么办呢？其实有一种办法，那就是永远到不了底，那要怎么实现呢？其实很简单，只要让数据不断增加就行！
怎么让数据不断增加呢，并且增加的规则是什么呢？其实很简单，我们每次滚上去一项，就拷贝这一项push 到列表数据末端，这样就能做到数据永远滚不完！
图片
下面是代码实现，为什么是除以22 呢？因为每一项的高度是 22px。
图片
现在可以达到想要的无限滚动效果。
图片
但是其实上面的做法还是有缺点的，因为数据不断地push也就是不断地增加，如果页面保持一段时间的话，会大大占用内存，导致页面卡顿！！
所以我们可以在适当的时间点，去初始化数据，也就是把数据恢复到一开始样子，这样就能避免数据不断增加了！
那么应该在什么时机去初始化数据呢？并且要怎么初始化才能让用户察觉不出来呢？怎么做到无缝衔接进行初始化呢？
通过一个图告诉大家~其实最好的时机就是在刚好滚动完一轮的时候。
图片
最终代码实现如下：
图片
最终实现效果：
图片
本文链接：//www.dmpip.com//www.dmpip.com/showinfo-26-95162-0.html突发奇想！Vue3 实现消息无限滚动的新思路！
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号
