请问这段代码错在哪里。不会滚动
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.bg{width: 400px;height:200px;margin: 0 auto;font-size: 12;background: #345;color: #9cf;font-family: "微软雅黑";border-radius: 20px; cursor: pointer;}
ul{list-style: none}
ul li{text-align: center;line-height: 30px}
#area{height:200px;overflow:hidden}
</style>
<script type="text/javascript">
var area = document.getElementById('area'),
con1 = document.getElementById('con1'),
con2 = document.getElementById('con2');
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)
</script>
</head>
<body>
<div class="bg">
<div id="area">
<ul id="con1">
<li>算一算虚度了多少个年头</li>
<li>仿佛足够写一套错爱的春秋</li>
<li>如果以后你还想为谁</li>
<li>浪费美好时候</li>
<li>眼泪只能在我的胸膛</li>
<li>毫无保留</li>
<li>互相折磨到白头</li>
<li>悲伤坚决不放手</li>
<li>开始纠缠之后</li>
<li>才又被人放大了自由</li>
<li>你的暴烈太温柔</li>
<li>感情又痛又享受</li>
</ul>
<ul id="con2"></ul>
</div>
</div>
</body>
</html>
