原標題：html標簽overflow屬性和javascript實現(xiàn)div標簽滾動

昨天一個朋友說他實現(xiàn)了一個div循環(huán)滾動顯示的demo，但是弄到jsp中就不滾動了，而且debug測試div的scrollTop值一直為0。

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

一般在html中直接寫css，不會出現(xiàn)這個問題。但是很多css都是寫在外部的，有時候，很多屬性值嵌套，特別是類屬性設置，有時候導致需要滾動的div的overflow屬性并沒有設置成功。這樣頁面就不會滾動，而且大部分檢查bug都是盯著java代碼來排錯。這樣就很容易找不出錯誤，并花費了很多時間。

java中實現(xiàn)循環(huán)滾動也比較簡單，如果是整個div無縫滾動顯示，我是用2個同樣的div階梯顯示實現(xiàn)的。

測試語句 測試語句 測試語句 測試語句 測試語句 測試語句

測試

測試語句

測試語句

測試語句

測試語句

測試語句

測試語句

測試語句

測試語句

測試語句

測試語句

< language="java" defer>//

獲取div標簽function getobj(element)

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

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

聲明并初始化變量var t;//計時器var speed=5;//

滾動速度var height=MAX_HEIGHT;//top div長度var bottomheight=MIN_HEIGHT;//

bottom div長度bottomlabel.innerHTML=toplabel.innerHTML;//

復制top內容到bottom，用來循環(huán)滾動顯示function move(){ //

當top滾動值scrollTop+offsetHeight等于top div的scrollHeight時。topdiv停止?jié)L動，并減少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，這樣，可以實現(xiàn)無縫滾動。

if (height

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

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

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

測試語句 測試語句 測試語句 測試語句 測試語句 測試語句

測試

測試語句

測試語句

測試語句

測試語句

測試語句

測試語句

測試語句

測試語句

測試語句

測試語句

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

聲明并初始化變量var t;//計時器var speed=5;//滾動速度bottomlabel.innerHTML=toplabel.innerHTML;//

復制top內容到bottom，用來循環(huán)滾動顯示function move(){ //當label的scrollTop值大于等于toplabel.scrollHeight時，減少label的scrollTop為起點。

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

定義計時器，并遞增top scrollTop。 }//

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

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

本文來自網(wǎng)絡

責任編輯：

總結

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

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