js主要通过4个属性来控制滚动条:
scrollHeight: 获取对象可滚动的高度。
scrollLeft:获取或设置对象已横向滚动的距离(距左端)。
scrollTop:获取或设置对象已纵向滚动的距离。
scrollWidth:获取对象可滚动的宽度.
例子:
写一个定时器,每隔5秒钟滚动条向下滚动对象可视区域的高度,若滚动到了底部,则自动回到顶端。
<!doctype html>
<head>
<title></title>
<style>
#main{
height:500px;
overflow-y:scroll;
}
#div{
height:2000px;
}
</style>
</head>
<body>
<div id="main">
<div id="div"></div>
</div>
</body>
<script>
window.onload=function(){
setInterval(function(){
var hScrollTop = document.getElementById('main').scrollTop;
var hScrollHeight = document.getElementById('main').scrollHeight;
var height = document.getElementById('main').offsetHeight;
console.log(hScrollTop+" "+hScrollHeight+" "+height);
if((height+hScrollTop)>=hScrollHeight){//滚动条已经到了容器底部
document.getElementById('main').scrollTop=0;
}else{
var h = hScrollTop + height;
document.getElementById('main').scrollTop=h;
}
},5000);
}
</script>
</html>
网友评论