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

最新推荐文章于 2024-07-25 08:30:07 发布

sujudz

最新推荐文章于 2024-07-25 08:30:07 发布

阅读量7k

点赞数

分类专栏： javascript 文章标签： javascript div html 测试 function jsp

本文链接：https://blog.csdn.net/sujudz/article/details/8009144

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

昨天一个朋友说他实现了一个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" οnmοuseοver="stop()" οnmοuseοut="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" οnmοuseοver="stop()" οnmοuseοut="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>