前言

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

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

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

實現(xiàn)

基礎(chǔ)頁面

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

圖片

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

圖片

滾動起來

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

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

圖片

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

圖片

永遠滾動不完？

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

那么想要永遠滾不完應(yīng)該怎么辦呢？其實有一種辦法，那就是永遠到不了底，那要怎么實現(xiàn)呢？其實很簡單，只要讓數(shù)據(jù)不斷增加就行！

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

圖片

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

圖片

現(xiàn)在可以達到想要的無限滾動效果。

圖片

數(shù)據(jù)不斷增長？

但是其實上面的做法還是有缺點的，因為數(shù)據(jù)不斷地push也就是不斷地增加，如果頁面保持一段時間的話，會大大占用內(nèi)存，導(dǎo)致頁面卡頓！！

所以我們可以在適當(dāng)?shù)臅r間點，去初始化數(shù)據(jù)，也就是把數(shù)據(jù)恢復(fù)到一開始樣子，這樣就能避免數(shù)據(jù)不斷增加了！

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

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

圖片

最終代碼實現(xiàn)如下：

圖片

最終實現(xiàn)效果：

圖片