js 滚动条属性、设置滚动条滚动速度-蒲公英云

js 滚动条属性、设置滚动条滚动速度

冷不防 2021-07-24 20:07 1996阅读 0赞

返回不带px的数值,没用负数,最小为0
.scrollTop      竖直滚动条到顶部的距离,即浏览器视口外的高度
.scrollLeft  水平滚动条到最左边的距离
.scrollHeight 滚动内容区域的高度
返回整个窗口的滚动条数值
    非ie
        返回整个窗口的滚动条数值
            document.documentElement.scrollTop
                竖直滚动条到顶部的距离
            document.documentElement.scrollLeft
                水平滚动条到最左边的距离
ie和非ie获得滚动条的兼容写法
    var temp=document.documentElement.scrollTop||document.body.scrollTop

在这里插入图片描述

设置滚动条速度代码示例：

<html>
    <head>
        <meta charset="utf-8">
        <title>滚动事件</title>
        <style>
            div{ 
                height:2000px;
            }
            button{ 
                position:fixed;
                bottom: 100px;
                right: 100px;
            }
        </style>
    </head>
    <body>
        <div>
        <button class="btn">去那里</button>
        </div>
        <script>
            var button=document.querySelector("button");
            button.onclick=function(){ 
                var id=setInterval(function(){ 
                    if(document.documentElement.scrollTop>0)
                    { 
                        document.documentElement.scrollTop-=100;
                        //当滑动条距顶部为0时,结束间隔任务
                        if(document.documentElement.scrollTop==0)
                        { 
                            clearInterval(id);
                        }
                    }
                },500);
            }
        </script>
    </body>
</html>