我对滚动消息的理解之scrollTop

       作为前端的初学者我前天学到了如何用JavaScript中的scrollTop来实现消息滚动效果。消息的向上滚动实际上可以看做是我们把相框里面的照片给向上拖动，我们能看到的消息就只有相框里面的部分。单条消息的滚动显示只是把相框的高度设成单条消息的高度了，这样每拖动一条消息的高度，我们就只看到一条消息了。滚动的其他原理就不提了，这里只说说我对scrollTop到底是如何实现滚动的理解。
       下面先贴上代码:

<script>
var area =document.getElementById("message");
     var con1=document.getElementById("con1");
     var con2=document.createElement("ul");
     con2.innerHTML=con1.innerHTML;//在这里复制
     area.appendChild(con2);
     area.scrollTop=0;
     function scrollUp(){
     if(area.scrollTop>=con1.offsetHeight){
        area.scrollTop=0;//在这里置零
    }else{
        area.scrollTop++;
     }
     }
    var time=200;
    var myScroll=setInterval("scrollUp()",time);//全局变量
     area.onmouseover=function(){
          clearInterval(myScroll);
     }
      area.onmouseout=function(){
        myScroll= setInterval("scrollUp()",time);//这里进行直接赋值
      }
</script>

       这里的area就是我前面说到的“相框”，con1和con2就是嵌在里面的“照片”。注意：调用scrollTop的是area，因为我们要动的东西是“相框”里面的内容。这段代码里面最重要的就是理解它到底是怎么实现循环滚动的。其中的关键就是复制语句和置零语，下面上图：


图1（ps：黑色框为area，红色框为con1）就是“相框”内的内容向上滚动到底就停止滚动了，即使继续增加area.scrollTop它也不会动，那我们就会想让它回到初始位置再重新向上滚动。就是变成下面这样：

图2就是我们消息滚动的初始状态，但是如果直接从图1跳到图2，我们的消息滚动就会变得不连贯，看着不舒服。怎么解决这个问题？那就用到了复制语句。
       复制的内容con2和原内容con1一样，只是位于con1之后，关系如下图：


（ps:蓝色框为复制的con2）复制内容有什么用？接着往下看：

这一刻就是关键时刻，这个时候我们解决了图1中出现的尴尬局面，红色框可以继续向上滚动，因为框内的内容还没到底，而此时内容已经开始循环了，因为蓝色框的内容和红色框的内容一样。那这个时候我们再把红色框拿回到初始位置即把scrollTop置零，变回图3的状态（因为红色框和蓝色框都是黑框的内容，所以如果改变scrollTop的值，他们的位置会一起变化）。因为红色框和蓝色框顶部的内容一样，即使回到初始状态你也看不出来中间变化的过程。
（ps:如果有不明白具体是怎么实现的请看教程，信息滚动效果制作！）

       第一次写这个，如有不足请多指教！谢谢！