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