                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /信息滚动效果制作

报错Uncaught TypeError: Cannot set property 'scrollTop' of null 是怎么回事。。。。。？

<!DOCTYPE HTML >
<html>
	<head>
		<meta charset="UTF-8">
		<title>无缝滚动</title>
		<style type="text/css">
		body{font-size:12px;line-height: 24px;text-align: center;}
		*{margin: 0;padding: 0;}
		ul{list-style: none;}
		#mooc{width: 399px;border: 5px solid #ababab;-moz-border-radius:15px;
			-webkit-border-radius:15px;border-radius:15px;box-shadow: 2px 2px 10px #ababab;
			margin: 50px auto 0;text-align: left;}
		#moocTitle{height:62px;overflow: hidden;font-size: 26px;line-height: 62px;
			padding-left: 30px;background-image: -moz-linear-gradient(top,#f05e6f,#c9394a);
			background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#f05e6f),color-stop(1,#c9394a));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#8fa1ff",endColorstr="#f05e6f",GradientType='0');border: 1px solid #f05e6f;-moz-border-radius:8px 8px 0 0;
			-webkit-border-radius:8px 8px 0 0;border-radius: 8px 8px 0 0;color: #fff;position: relative;}
		#moocbox{height: 144px;width: 335px;margin-left: 25px;margin-top: 10px;overflow: hidden;}
		#mooc ul li{height: 24px;}

		</style>
		
		<script type="text/javascript">
		var area=document.getElementById('moocbox');
		var con1=document.getElementById('con1');
		var con2=document.getElementById('con2');
		var speed=50;
		area.scrollTop=0;
		con2.innerHTML=con1.innerHTML;
		function scrollUP(){
			if(area.scrollTop>=con1.scrollHeight){
				area.scrollTop=0;
			}else{
				area.scrollTop++;
			}
		}
		var myScroll=setInterval("scrollUP()",speed);
		area.onmouseover=function(){
			clearInterval(myScroll);
		}
		area.onmouseout=function(){
			myScroll=setInterval("scrollUP()",speed);
		}
		</script>
	</head>
	<body>
		<div id="mooc">
			<h3 id="moocTitle">无缝滚动示例</h3>
			<div id="moocbox">
				<ul id="con1">
					<li>11111</li>
					<li>22222</li>
					<li>33333</li>
					<li>44444o</li>
					<li>55555</li>
					<li>66666</li>
					<li>77777</li>
					<li>88888</li>
					<li>99999</li>
				</ul>
				<ul id="con2">
					
				</ul>
			</div>
		</div>
	</body>
</html>

pinkhide27

2015-12-03

源自：信息滚动效果制作

关注问题我要回答

11024

操作

收起

2 回答

一毛钱回答被采纳 +3 积分
2015-12-03

<!DOCTYPE HTML >
<html>

	<head>
		<meta charset="UTF-8">
		<title>无缝滚动</title>
		<style type="text/css">
			body{font-size:12px;line-height: 24px;text-align: center;}
			        *{margin: 0;padding: 0;}
			        ul{list-style: none;}
			        #mooc{width: 399px;border: 5px solid #ababab;-moz-border-radius:15px;
			            -webkit-border-radius:15px;border-radius:15px;box-shadow: 2px 2px 10px #ababab;
			            margin: 50px auto 0;text-align: left;}
			        #moocTitle{height:62px;overflow: hidden;font-size: 26px;line-height: 62px;
			            padding-left: 30px;background-image: -moz-linear-gradient(top,#f05e6f,#c9394a);
			            background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#f05e6f),color-stop(1,#c9394a));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#8fa1ff",endColorstr="#f05e6f",GradientType='0');border: 1px solid #f05e6f;-moz-border-radius:8px 8px 0 0;
			            -webkit-border-radius:8px 8px 0 0;border-radius: 8px 8px 0 0;color: #fff;position: relative;}
			        #moocbox{height: 144px;width: 335px;margin-left: 25px;margin-top: 10px;overflow: hidden;}
			        #mooc ul li{height: 24px;}
		</style>

		<script type="text/javascript">
		var speed = 50;
		var area;
		window.onload=function(){
			 area = document.getElementById('moocbox');
			var con1 = document.getElementById('con1');
			var con2 = document.getElementById('con2');			
			area.scrollTop = 0;
			con2.innerHTML = con1.innerHTML;
			var myScroll = setInterval("scrollUP()", speed);
			area.onmouseover = function() {
				clearInterval(myScroll);
			}
			area.onmouseout = function() {
				myScroll = setInterval("scrollUP()", speed);
			}
		}

			function scrollUP() {
				if (area.scrollTop >= con1.scrollHeight) {
					area.scrollTop = 0;
				} else {
					area.scrollTop++;
				}
			}
			
		</script>
	</head>

	<body>
		<div id="mooc">
			<h3 id="moocTitle">无缝滚动示例</h3>
			<div id="moocbox">
				<ul id="con1">
					<li>11111</li>
					<li>22222</li>
					<li>33333</li>
					<li>44444o</li>
					<li>55555</li>
					<li>66666</li>
					<li>77777</li>
					<li>88888</li>
					<li>99999</li>
				</ul>
				<ul id="con2">

				</ul>
			</div>
		</div>
	</body>

</html>