猿问

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>


木可不可
浏览 2317回答 2
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
我要回答