原标题：html标签overflow属性和javascript实现div标签滚动

昨天一个朋友说他实现了一个div循环滚动显示的demo，但是弄到jsp中就不滚动了，而且debug测试div的scrollTop值一直为0。

拿到他的jsp文件看，java代码没有什么问题，问题就是出在html标签overflow属性上，一般，设置滚动显示的div都会设置这个值，如果没有设置这个属性，java的循环滚动显示代码就没有效果，而且输出scrollTop值也一直为0.

一般在html中直接写css，不会出现这个问题。但是很多css都是写在外部的，有时候，很多属性值嵌套，特别是类属性设置，有时候导致需要滚动的div的overflow属性并没有设置成功。这样页面就不会滚动，而且大部分检查bug都是盯着java代码来排错。这样就很容易找不出错误，并花费了很多时间。

java中实现循环滚动也比较简单，如果是整个div无缝滚动显示，我是用2个同样的div阶梯显示实现的。

测试语句 测试语句 测试语句 测试语句 测试语句 测试语句

测试

< 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，用来循环滚动显示function move(){ //

当top滚动值scrollTop+offsetHeight等于top div的scrollHeight时。topdiv停止滚动，并减少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，这样，可以实现无缝滚动。

if (height

同时再改变top和bottom的height的值，然后继续递增top的scrollTop，实现滚动。 } } toplabel.scrollTop+=speed; t=setTimeout(move,100); //

定义计时器，并递增top scrollTop。}//启动和鼠标进入，离开执行函数。实现鼠标移动上去停止滚动，离开继续滚动move();function stop(){ clearTimeout(t);}function start(){ t=setTimeout(move,100);}>

还有一个更简便的方法，就是直接把最上层div的scrollTop值减去bottomlabel.offsetHeight值，得到起点值，重新开始循环。

测试语句 测试语句 测试语句 测试语句 测试语句 测试语句

测试

声明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，用来循环滚动显示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。 }//

启动和鼠标进入，离开执行函数。实现鼠标移动上去停止滚动，离开继续滚动move();function stop(){ clearTimeout(t);}function start(){ t=setTimeout(move,100);}>

更多内容，参考最模板网站()

本文来自网络

责任编辑：