前言

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

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

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

實(shí)現(xiàn)

基礎(chǔ)頁(yè)面

首先準(zhǔn)備一下基礎(chǔ)的頁(yè)面，之所以給容器設(shè)置 overflow:hidden 是為了把滾動(dòng)條給去掉，因?yàn)槲覀儾⒉恍枰獫L動(dòng)條。

圖片

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

圖片

滾動(dòng)起來(lái)

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

每次都對(duì) top 進(jìn)行遞增，保證容器不斷向上滾動(dòng)。

圖片

但是我們可以看到，雖然top 一直在遞增，但是滾動(dòng)到最后就不動(dòng)了！這是因?yàn)檫@個(gè)時(shí)候已經(jīng)滾動(dòng)到最底部了，那么自然就滾動(dòng)不了了。

圖片

永遠(yuǎn)滾動(dòng)不完？

上面為啥滾到底部就滾不動(dòng)了呢？因?yàn)榈阶畹撞苛?，所以滾不動(dòng)了呀！

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

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

圖片

下面是代碼實(shí)現(xiàn)，為什么是除以22 呢？因?yàn)槊恳豁?xiàng)的高度是 22px。

圖片

現(xiàn)在可以達(dá)到想要的無(wú)限滾動(dòng)效果。

圖片

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

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

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

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

通過(guò)一個(gè)圖告訴大家~其實(shí)最好的時(shí)機(jī)就是在剛好滾動(dòng)完一輪的時(shí)候。

圖片

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

圖片

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

圖片