美文网首页
js控制滚动条滚动

js控制滚动条滚动

作者: 罂粟1995 | 来源:发表于2018-03-15 00:00 被阅读0次

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>

相关文章

网友评论

      本文标题:js控制滚动条滚动

      本文链接:https://www.haomeiwen.com/subject/ftccqftx.html