前言

大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心！

最近有一個需求，需要在頁面中做一個垂直方向的無限滾動，效果基本為如下，這個滾動是一直在持續的，不斷循環。

這個效果挺有意思的，實現起來不難，所以分享一下！

實現

基礎頁面

首先準備一下基礎的頁面，之所以給容器設置 overflow:hidden 是為了把滾動條給去掉，因為我們并不需要滾動條。

圖片

可以看出有些項是不在容器可視范圍內的，且每一項的高度是 22px（每一項的高度可以自己定，我這里就用 22px 來進行示范）。

圖片

滾動起來

接下來得讓這個容器滾動起來，那要怎么滾動呢？可以使用 scrollTo 這個方法來進行滾動~并且為了持續保持滾動，可以使用 requestAnimationFrame 來不斷進行。

每次都對 top 進行遞增，保證容器不斷向上滾動。

圖片

但是我們可以看到，雖然top 一直在遞增，但是滾動到最后就不動了！這是因為這個時候已經滾動到最底部了，那么自然就滾動不了了。

圖片

永遠滾動不完？

上面為啥滾到底部就滾不動了呢？因為到最底部了，所以滾不動了呀！

那么想要永遠滾不完應該怎么辦呢？其實有一種辦法，那就是永遠到不了底，那要怎么實現呢？其實很簡單，只要讓數據不斷增加就行！

怎么讓數據不斷增加呢，并且增加的規則是什么呢？其實很簡單，我們每次滾上去一項，就拷貝這一項push 到列表數據末端，這樣就能做到數據永遠滾不完！

圖片

下面是代碼實現，為什么是除以22 呢？因為每一項的高度是 22px。

圖片

現在可以達到想要的無限滾動效果。

圖片

數據不斷增長？

但是其實上面的做法還是有缺點的，因為數據不斷地push也就是不斷地增加，如果頁面保持一段時間的話，會大大占用內存，導致頁面卡頓??！

所以我們可以在適當的時間點，去初始化數據，也就是把數據恢復到一開始樣子，這樣就能避免數據不斷增加了！

那么應該在什么時機去初始化數據呢？并且要怎么初始化才能讓用戶察覺不出來呢？怎么做到無縫銜接進行初始化呢？

通過一個圖告訴大家~其實最好的時機就是在剛好滾動完一輪的時候。

圖片

最終代碼實現如下：

圖片

最終實現效果：

圖片