首頁(yè) 猿問(wèn) Uncaught...

Uncaught TypeError: Cannot set property 'scrollTop' of null

JavaScript

木可不可 2015-12-07 15:39:38

chrome顯示代碼的24行Con2.innerHTML = Con1.innerHTML有問(wèn)題是一個(gè)滾動(dòng)的代碼如下：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>js實(shí)現(xiàn)無(wú)縫滾動(dòng)效果</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滾動(dòng)方式</a></li><li><a>alternate:表示在兩端之間滾動(dòng)</a></li><li><a>scroll：表示由一端滾動(dòng)到另一端，會(huì)重復(fù)</a></li><li><a>slide：表示由一端滾動(dòng)到另一端，不會(huì)重復(fù)</a></li><li><a>2、direction：滾動(dòng)方向</a></li><li><a>3、loop：滾動(dòng)次數(shù)（loop=-1一直滾下去）</a></li><li><a>4、scrollamount：設(shè)定活動(dòng)字幕的滾動(dòng)速度</a></li><li><a>5、scrolldelay：設(shè)定活動(dòng)字幕滾動(dòng)兩次之間的延遲時(shí)間</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

TA貢獻(xiàn)1123條經(jīng)驗(yàn) 獲得超629個(gè)贊

var area = document.getElementById('box');這句執(zhí)行的時(shí)候<div id="box">還沒(méi)有加載，所以此處area為null，沒(méi)有scrollTop屬性，你可以把js放到頁(yè)面最后,</body>之前就行

反對(duì) 回復(fù) 2015-12-07

Caballarii

TA貢獻(xiàn)1123條經(jīng)驗(yàn) 獲得超629個(gè)贊

<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>js實(shí)現(xiàn)無(wú)縫滾動(dòng)效果</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滾動(dòng)方式</a></li>
<li><a>alternate:表示在兩端之間滾動(dòng)</a></li>
<li><a>scroll：表示由一端滾動(dòng)到另一端，會(huì)重復(fù)</a></li>
<li><a>slide：表示由一端滾動(dòng)到另一端，不會(huì)重復(fù)</a></li>
<li><a>2、direction：滾動(dòng)方向</a></li>
<li><a>3、loop：滾動(dòng)次數(shù)（loop=-1一直滾下去）</a></li>
<li><a>4、scrollamount：設(shè)定活動(dòng)字幕的滾動(dòng)速度</a></li>
<li><a>5、scrolldelay：設(shè)定活動(dòng)字幕滾動(dòng)兩次之間的延遲時(shí)間</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>

反對(duì) 回復(fù) 2015-12-07