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

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

HTML代码：

<div >

<div >

</div>

<div >

</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永远不会达到临界点即document.getElementById("demo").scrollTop>=document.getElementById("demo2").offsetTop，因为在此之前就停止卷动。scrollTop++没有作用