HTML中 scrollTop++ 不能够实现div向上滚动的原因

假设有三个层，id分别是：demo,demo1,demo2,包含关系如下：即，demo 包含demo1和demo2;

HTML代码：

 <div id="demo" style="background-color:#ff0000; width:500px;height:200px;overflow: hidden;" >      

  

        <div id="demo1" style="width:500px;height:200px;background-color:yellow"> 

        </div>

        <div id="demo2" style="width:500px;height:200px;background-color:pink">       
</div>

</div>

JS代码：

<script type="text/javascript">

       document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML;

       document.getElementById("demo2").style.backgroundColor="blue"; 

      function  let(){              

            document.getElementById("demo").scrollTop++;        

    }

var myTime=setInterval("let()",100);

</script>

1.外层div 的overflow属性没有设置为“hidden”,不会显示滚动效果；

2.内层div(这里指的是demo1和demo2)的高度之和没有超过外层div的高度；本例子来说：demo1 高度200 +demo2高度 200=400px必须大于demo的高度200px才会出现滚动。

3.何时滚动会停止？内部最下面的div(本例子demo2)的底部与外层div(demo)底部齐平时停止滚动！

如果要不停滚动可以修改js代码：

<script type="text/javascript">

     document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML;       

     function  let(){ 
if(document.getElementById("demo").scrollTop>=parseInt(document.getElementById("demo1").style.height)){
   
document.getElementById("demo").scrollTop=0;

}
else{
document.getElementById("demo").scrollTop++;   
}

    }  
var myTime=setInterval("let()",10);

</script>

由于style.height属性只能取得行内样式的值，如果换成currentstyle或者document.getComputedStyle("",null)还需要判断，所以最好使用demo2的offsetHeight

<script type="text/javascript">

     document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML;       

     function  let(){ 
if(document.getElementById("demo").scrollTop>=document.getElementById("demo2").offsetTop){
   
document.getElementById("demo").scrollTop=0;

}
else{
document.getElementById("demo").scrollTop++;   
}

    }  
var myTime=setInterval("let()",10);

</script>

但是这里一定要注意offsetTop包含外层div(demo)的padding,demo2的offsetTop要大于200;也就是说如果demo1的高度和demo2若刚好等于demo的高度则demo的scrollTop永远不会达到临界点即[b]document.getElementById("demo").scrollTop>=document.getElementById("demo2").offsetTop，因为在此之前就停止卷动。scrollTop++没有作用[/b]