                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /信息滾動(dòng)效果制作

if (area.scrollTop >= area.scrollHeight/2 ) { area.scrollTop = 0; }

不是很能理解為什么>= area.scrollHeight/2 且area.scrollTop=0就可以無縫了。

其實(shí)TAMA醬不是我名字

2016-04-08

源自：信息滾動(dòng)效果制作 3-2

關(guān)注問題我要回答

1362

操作

收起

1 回答

飛飛赫赫回答被采納 +3 積分
2016-04-08

首先你的考慮無縫滾動(dòng)的原理，就是復(fù)制一個(gè)一樣的接著上一個(gè)滾動(dòng)，然后再明白scrollTop（被卷去的高度）和scrollHeight（區(qū)域高度），區(qū)域里有兩個(gè)ul他們等高并且剛好把區(qū)域高度劃分為兩半（area.scrollHeight/2），只要第一個(gè)滾到看不見了（area.scrollTop >= area.scrollHeight/2），就可以把第一個(gè)拉回到最底下（area.scrollTop=0）。不知道這樣的解釋你能明白嗎

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

其實(shí)TAMA醬不是我名字提問者

能明白。。但是還是不太理解為什么把第一個(gè)拉回到最底下而不是直接覆蓋掉還沒有滾完的第二個(gè)部分。。。

2016-04-09 回復(fù) 有任何疑惑可以回復(fù)我~

#2

飛飛赫赫回復(fù) 其實(shí)TAMA醬不是我名字提問者

忘記看慕課回復(fù)了。不知道你現(xiàn)在明白沒。因?yàn)槿绻苯影训谝粋€(gè)覆蓋第二個(gè)，會(huì)出現(xiàn)很不好的用戶體驗(yàn)，因?yàn)榧偃缒憧匆姷臐L動(dòng)區(qū)域?yàn)?00px高，需要滾動(dòng)的文字div有150px高，當(dāng)文字滾完100px，只剩下50px時(shí)，后面不就出現(xiàn)了50px空白了，所以要復(fù)制一個(gè)div填補(bǔ)這50px空白。第一個(gè)div當(dāng)滾完150px時(shí)，第二個(gè)div正好也滾完100px，還剩50px，這時(shí)把第一個(gè)div拉到最底下的好處就出現(xiàn)了，第一個(gè)div可以接著第二個(gè)div滾動(dòng)。

2016-04-27 回復(fù) 有任何疑惑可以回復(fù)我~

#3

其實(shí)TAMA醬不是我名字提問者

非常感謝！

2016-04-27 回復(fù) 有任何疑惑可以回復(fù)我~