我對(duì)滾動(dòng)消息的理解之scrollTop

Honwhy 發(fā)布于2019-08-19 17:49 / 2480人閱讀

摘要：?jiǎn)螚l消息的滾動(dòng)顯示只是把相框的高度設(shè)成單條消息的高度了，這樣每拖動(dòng)一條消息的高度，我們就只看到一條消息了。滾動(dòng)的其他原理就不提了，這里只說說我對(duì)到底是如何實(shí)現(xiàn)滾動(dòng)的理解。

???????作為前端的初學(xué)者我前天學(xué)到了如何用JavaScript中的scrollTop來實(shí)現(xiàn)消息滾動(dòng)效果。消息的向上滾動(dòng)實(shí)際上可以看做是我們把相框里面的照片給向上拖動(dòng)，我們能看到的消息就只有相框里面的部分。單條消息的滾動(dòng)顯示只是把相框的高度設(shè)成單條消息的高度了，這樣每拖動(dòng)一條消息的高度，我們就只看到一條消息了。滾動(dòng)的其他原理就不提了，這里只說說我對(duì)scrollTop到底是如何實(shí)現(xiàn)滾動(dòng)的理解。
???????下面先貼上代碼:

???????這里的area就是我前面說到的“相框”，con1和con2就是嵌在里面的“照片”。注意：調(diào)用scrollTop的是area，因?yàn)槲覀円獎(jiǎng)拥臇|西是“相框”里面的內(nèi)容。這段代碼里面最重要的就是理解它到底是怎么實(shí)現(xiàn)循環(huán)滾動(dòng)的。其中的關(guān)鍵就是復(fù)制語句和置零語，下面上圖：

圖1（ps：黑色框?yàn)閍rea，紅色框?yàn)閏on1）就是“相框”內(nèi)的內(nèi)容向上滾動(dòng)到底就停止?jié)L動(dòng)了，即使繼續(xù)增加area.scrollTop它也不會(huì)動(dòng)，那我們就會(huì)想讓它回到初始位置再重新向上滾動(dòng)。就是變成下面這樣：

圖2就是我們消息滾動(dòng)的初始狀態(tài)，但是如果直接從圖1跳到圖2，我們的消息滾動(dòng)就會(huì)變得不連貫，看著不舒服。怎么解決這個(gè)問題？那就用到了復(fù)制語句。
???????復(fù)制的內(nèi)容con2和原內(nèi)容con1一樣，只是位于con1之后，關(guān)系如下圖：

（ps:藍(lán)色框?yàn)閺?fù)制的con2）復(fù)制內(nèi)容有什么用？接著往下看：

這一刻就是關(guān)鍵時(shí)刻，這個(gè)時(shí)候我們解決了圖1中出現(xiàn)的尷尬局面，紅色框可以繼續(xù)向上滾動(dòng)，因?yàn)榭騼?nèi)的內(nèi)容還沒到底，而此時(shí)內(nèi)容已經(jīng)開始循環(huán)了，因?yàn)樗{(lán)色框的內(nèi)容和紅色框的內(nèi)容一樣。那這個(gè)時(shí)候我們?cè)侔鸭t色框拿回到初始位置即把scrollTop置零，變回圖3的狀態(tài)（因?yàn)榧t色框和藍(lán)色框都是黑框的內(nèi)容，所以如果改變scrollTop的值，他們的位置會(huì)一起變化）。因?yàn)榧t色框和藍(lán)色框頂部的內(nèi)容一樣，即使回到初始狀態(tài)你也看不出來中間變化的過程。
（ps:如果有不明白具體是怎么實(shí)現(xiàn)的請(qǐng)看教程，信息滾動(dòng)效果制作！）

???????第一次寫這個(gè)，如有不足請(qǐng)多指教！謝謝！