html标签overflow属性和javascript实现div标签滚动问题.docx

html标签overflow属性和javascript实现div标签滚动问题昨天一个朋友说他实现了一个div循环滚动显示的demo，但是弄到jsp中就不滚动了，而且debug测试div的scrollTop值一直为0。拿到他的jsp文件看，javascript代码没有什么问题，问题就是出在html标签overflow属性上，一般，设置滚动显示的div都会设置这个值，如果没有设置这个属性，javascript的循环滚动显示代码就没有效果，而且输出scrollTop值也一直为0.一般在html中直接写css，不会出现这个问题。但是很多css都是写在外部的，有时候，很多属性值嵌套，特别是类属性设置，有时候导致需要滚动的div的overflow属性并没有设置成功。这样页面就不会滚动，而且大部分检查bug都是盯着javascript代码来排错。这样就很容易找不出错误，并花费了很多时间。javascript中实现循环滚动也比较简单，如果是整个div无缝滚动显示，我是用2个同样的div阶梯显示实现的。?htmlheadmeta http-equiv=Content-Language content=zh-cnmeta http-equiv=Content-Type content=text/html; charset=gb2312title测试语句测试语句测试语句测试语句测试语句测试语句测试/title/headbodydiv id=label1 onmouseover=stop() onmouseout=start()div id=label2 style=overflow:hidden;height:80font color=#FF0000 size=5测试语句/fontbrfont color=#00FF00 size=5测试语句/fontbrfont color=#FFFF00 size=5测试语句/fontbrfont color=#00FF00 size=5测试语句/fontbrfont color=#0000FF size=5测试语句/fontbrfont color=#00FF00 size=5测试语句/fontbrfont color=#808000 size=5测试语句/fontbrfont color=#00FF00 size=5测试语句/fontbrfont color=#800000 size=5测试语句/fontbrfont color=#FF00FF size=5测试语句/fontbr/divdiv id=label3 style=overflow:hidden;height:1/div/divscript language=javascript 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 (heightMIN_HEIGHT){//top height值减少到0时，停止递减过程，并使top 的scrollTop值等于bottom的offsetTop。toplabel.scrollTop=bottomlabel.offsetTop;toplabel.style.height=height=MAX_HEIGHT;bottomlabel.