您的位置：首页 > Web前端 > JavaScript

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

2012-09-23 10:27 701 查看
昨天一个朋友说他实现了一个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阶梯显示实现的。

<html>

<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>测试语句 测试语句 测试语句 测试语句 测试语句 测试语句 测试</title>
</head>

<body>
<div id="label1" onmouseover="stop()" onmouseout="start()">
<div id="label2" style="overflow:hidden;height:80">
<font color="#FF0000" size="5">测试语句</font><br>
<font color="#00FF00" size="5">测试语句</font><br>
<font color="#FFFF00" size="5">测试语句</font><br>
<font color="#00FF00" size="5">测试语句</font><br>
<font color="#0000FF" size="5">测试语句</font><br>
<font color="#00FF00" size="5">测试语句</font><br>
<font color="#808000" size="5">测试语句</font><br>
<font color="#00FF00" size="5">测试语句</font><br>
<font color="#800000" size="5">测试语句</font><br>
<font color="#FF00FF" size="5">测试语句</font><br>
</div>
<div id="label3" style="overflow:hidden;height:1"></div></div>

<script 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 (height<MIN_HEIGHT){								//top height值减少到0时，停止递减过程，并使top 的scrollTop值等于bottom的offsetTop。
toplabel.scrollTop=bottomlabel.offsetTop;
toplabel.style.height=height=MAX_HEIGHT;
bottomlabel.style.height=bottomheight=MIN_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);
}
</script>
</body>

</html>


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

<html>

<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>测试语句 测试语句 测试语句 测试语句 测试语句 测试语句 测试</title>
</head>

<body>
<div id="label1" onmouseover="stop()" onmouseout="start()" style="overflow:hidden;height:160">
<div id="label2" >
<font color="#FF0000" size="5">测试语句</font><br>
<font color="#00FF00" size="5">测试语句</font><br>
<font color="#FFFF00" size="5">测试语句</font><br>
<font color="#00FF00" size="5">测试语句</font><br>
<font color="#0000FF" size="5">测试语句</font><br>
<font color="#00FF00" size="5">测试语句</font><br>
<font color="#808000" size="5">测试语句</font><br>
<font color="#00FF00" size="5">测试语句</font><br>
<font color="#800000" size="5">测试语句</font><br>
<font color="#FF00FF" size="5">测试语句</font><br>
</div>
<div id="label3"></div></div>
<div id="text"></div>

<script language="javascript" defer>
//获取div标签
function getobj(element)
{
return document.getElementById(element);
}
//声明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);
}
</script>
</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript div html 测试 function jsp
相关文章推荐
新的分享
章节导航