美文网首页
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