Uncaught TypeError: Cannot set property 'scrollTop' of null
chrome显示代码的24行Con2.innerHTML = Con1.innerHTML有问题
是一个滚动的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js实现无缝滚动效果</title>
<style type="text/css">
#box{
margin:0 auto;
width: 700px;
height: 300px;
border:3px solid #ccc;
background: #000;
}
#box li {
color: #FFF;
font-size: 24px;
list-style: none;
}
</style>
<script type="text/javascript">
var area = document.getElementById('box');
var Con1 = document.getElementById('con1');
var Con2 = document.getElementById('con2');
area.scrollTop = 0;
Con2.innerHTML = Con1.innerHTML;
function scrollUP () {
if (area.scrollTop>=con1.offsetHeight) {
area.scrollTop = 0;
} else{
area.scrollTop++;
};
}
var time = 50;
var myScroll = setInterval('scrollUP()',time);
area.onmouseover = function(){
clearInterval(myScroll);
}
area.onmouseout = function () {
myScroll = setInterval('scrollUP()',time);
}
</script>
</head>
<body>
<div id="box">
<ul id="con1">
<li><a>1、behavior滚动方式</a></li>
<li><a>alternate:表示在两端之间滚动</a></li>
<li><a>scroll：表示由一端滚动到另一端，会重复</a></li>
<li><a>slide：表示由一端滚动到另一端，不会重复</a></li>
<li><a>2、direction：滚动方向</a></li>
<li><a>3、loop：滚动次数（loop=-1一直滚下去）</a></li>
<li><a>4、scrollamount：设定活动字幕的滚动速度</a></li>
<li><a>5、scrolldelay：设定活动字幕滚动两次之间的延迟时间</a></li>
</ul>
<ul id="con2">
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>
</div>
</body>
</html>
木可不可2回答
-
Caballarii
var area = document.getElementById('box');这句执行的时候<div id="box">还没有加载，所以此处area为null，没有scrollTop属性，你可以把js放到页面最后,</body>之前就行 -
Caballarii
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js实现无缝滚动效果</title> <style type="text/css"> #box{ margin:0 auto; width: 700px; height: 300px; border:3px solid #ccc; background: #000; } #box li { color: #FFF; font-size: 24px; list-style: none; } </style> </head> <body> <div id="box"> <ul id="con1"> <li><a>1、behavior滚动方式</a></li> <li><a>alternate:表示在两端之间滚动</a></li> <li><a>scroll：表示由一端滚动到另一端，会重复</a></li> <li><a>slide：表示由一端滚动到另一端，不会重复</a></li> <li><a>2、direction：滚动方向</a></li> <li><a>3、loop：滚动次数（loop=-1一直滚下去）</a></li> <li><a>4、scrollamount：设定活动字幕的滚动速度</a></li> <li><a>5、scrolldelay：设定活动字幕滚动两次之间的延迟时间</a></li> </ul> <ul id="con2"> <li><a></a></li> <li><a></a></li> <li><a></a></li> <li><a></a></li> <li><a></a></li> <li><a></a></li> <li><a></a></li> <li><a></a></li> </ul> </div> <script type="text/javascript"> var area = document.getElementById('box'); var Con1 = document.getElementById('con1'); var Con2 = document.getElementById('con2'); area.scrollTop = 0; Con2.innerHTML = Con1.innerHTML; function scrollUP () { if (area.scrollTop>=con1.offsetHeight) { area.scrollTop = 0; } else{ area.scrollTop++; }; } var time = 50; var myScroll = setInterval('scrollUP()',time); area.onmouseover = function(){ clearInterval(myScroll); } area.onmouseout = function () { myScroll = setInterval('scrollUP()',time); } </script> </body> </html>
随时随地看视频慕课网APP
相关分类
JavaScript