原標(biāo)題：html標(biāo)簽overflow屬性和javascript實(shí)現(xiàn)div標(biāo)簽滾動(dòng)

昨天一個(gè)朋友說(shuō)他實(shí)現(xiàn)了一個(gè)div循環(huán)滾動(dòng)顯示的demo，但是弄到j(luò)sp中就不滾動(dòng)了，而且debug測(cè)試div的scrollTop值一直為0。

拿到他的jsp文件看，java代碼沒(méi)有什么問(wèn)題，問(wèn)題就是出在html標(biāo)簽overflow屬性上，一般，設(shè)置滾動(dòng)顯示的div都會(huì)設(shè)置這個(gè)值，如果沒(méi)有設(shè)置這個(gè)屬性，java的循環(huán)滾動(dòng)顯示代碼就沒(méi)有效果，而且輸出scrollTop值也一直為0.

一般在html中直接寫(xiě)css，不會(huì)出現(xiàn)這個(gè)問(wèn)題。但是很多css都是寫(xiě)在外部的，有時(shí)候，很多屬性值嵌套，特別是類屬性設(shè)置，有時(shí)候?qū)е滦枰獫L動(dòng)的div的overflow屬性并沒(méi)有設(shè)置成功。這樣頁(yè)面就不會(huì)滾動(dòng)，而且大部分檢查bug都是盯著java代碼來(lái)排錯(cuò)。這樣就很容易找不出錯(cuò)誤，并花費(fèi)了很多時(shí)間。

java中實(shí)現(xiàn)循環(huán)滾動(dòng)也比較簡(jiǎn)單，如果是整個(gè)div無(wú)縫滾動(dòng)顯示，我是用2個(gè)同樣的div階梯顯示實(shí)現(xiàn)的。

測(cè)試語(yǔ)句 測(cè)試語(yǔ)句 測(cè)試語(yǔ)句 測(cè)試語(yǔ)句 測(cè)試語(yǔ)句 測(cè)試語(yǔ)句

測(cè)試

測(cè)試語(yǔ)句

測(cè)試語(yǔ)句

測(cè)試語(yǔ)句

測(cè)試語(yǔ)句

測(cè)試語(yǔ)句

測(cè)試語(yǔ)句

測(cè)試語(yǔ)句

測(cè)試語(yǔ)句

測(cè)試語(yǔ)句

測(cè)試語(yǔ)句

< language="java" defer>//

獲取div標(biāo)簽function getobj(element)

{ return document.getElementById(element);}//

聲明div標(biāo)簽變量var toplabel=getobj("label2");var bottomlabel=getobj("label3");//定義div標(biāo)簽長(zhǎng)度常量MAX_HEIGHT=80;MIN_HEIGHT=1;//

聲明并初始化變量var t;//計(jì)時(shí)器var speed=5;//

滾動(dòng)速度var height=MAX_HEIGHT;//top div長(zhǎng)度var bottomheight=MIN_HEIGHT;//

bottom div長(zhǎng)度bottomlabel.innerHTML=toplabel.innerHTML;//

復(fù)制top內(nèi)容到bottom，用來(lái)循環(huán)滾動(dòng)顯示function move(){ //

當(dāng)top滾動(dòng)值scrollTop+offsetHeight等于top div的scrollHeight時(shí)。topdiv停止?jié)L動(dòng)，并減少top div的style.height值 if ((toplabel.scrollTop+toplabel.offsetHeight)>=toplabel.scrollHeight)

{ toplabel.style.height=height-=speed; bottomlabel.style.height=bottomheight+=speed; //減少top heigth并同步增加bottom height，這樣，可以實(shí)現(xiàn)無(wú)縫滾動(dòng)。

if (height

同時(shí)再改變top和bottom的height的值，然后繼續(xù)遞增top的scrollTop，實(shí)現(xiàn)滾動(dòng)。 } } toplabel.scrollTop+=speed; t=setTimeout(move,100); //

定義計(jì)時(shí)器，并遞增top scrollTop。}//啟動(dòng)和鼠標(biāo)進(jìn)入，離開(kāi)執(zhí)行函數(shù)。實(shí)現(xiàn)鼠標(biāo)移動(dòng)上去停止?jié)L動(dòng)，離開(kāi)繼續(xù)滾動(dòng)move();function stop(){ clearTimeout(t);}function start(){ t=setTimeout(move,100);}>

還有一個(gè)更簡(jiǎn)便的方法，就是直接把最上層div的scrollTop值減去bottomlabel.offsetHeight值，得到起點(diǎn)值，重新開(kāi)始循環(huán)。

測(cè)試語(yǔ)句 測(cè)試語(yǔ)句 測(cè)試語(yǔ)句 測(cè)試語(yǔ)句 測(cè)試語(yǔ)句 測(cè)試語(yǔ)句

測(cè)試

測(cè)試語(yǔ)句

測(cè)試語(yǔ)句

測(cè)試語(yǔ)句

測(cè)試語(yǔ)句

測(cè)試語(yǔ)句

測(cè)試語(yǔ)句

測(cè)試語(yǔ)句

測(cè)試語(yǔ)句

測(cè)試語(yǔ)句

測(cè)試語(yǔ)句

聲明div標(biāo)簽變量var toplabel=getobj("label2");var bottomlabel=getobj("label3");var label=getobj("label1");var text=getobj("text");//

聲明并初始化變量var t;//計(jì)時(shí)器var speed=5;//滾動(dòng)速度bottomlabel.innerHTML=toplabel.innerHTML;//

復(fù)制top內(nèi)容到bottom，用來(lái)循環(huán)滾動(dòng)顯示function move(){ //當(dāng)label的scrollTop值大于等于toplabel.scrollHeight時(shí)，減少label的scrollTop為起點(diǎn)。

if (label.scrollTop>=toplabel.scrollHeight) { label.scrollTop-=bottomlabel.offsetHeight; } label.scrollTop+=speed; t=setTimeout(move,100); //

定義計(jì)時(shí)器，并遞增top scrollTop。 }//

啟動(dòng)和鼠標(biāo)進(jìn)入，離開(kāi)執(zhí)行函數(shù)。實(shí)現(xiàn)鼠標(biāo)移動(dòng)上去停止?jié)L動(dòng)，離開(kāi)繼續(xù)滾動(dòng)move();function stop(){ clearTimeout(t);}function start(){ t=setTimeout(move,100);}>

更多內(nèi)容，參考最模板網(wǎng)站()

本文來(lái)自網(wǎng)絡(luò)

責(zé)任編輯：

總結(jié)

以上是生活随笔為你收集整理的java怎么设有滚动的标签,html标签overflow属性和javascript实现div标签滚动的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。