javascript 读取滚动条位置，文档总高度，页面高度，滚动条距离底端位置

最新推荐文章于 2023-08-19 10:56:57 发布

小蒜瓣

最新推荐文章于 2023-08-19 10:56:57 发布

阅读量3.4k

点赞数

分类专栏：编码文章标签：滚动条

编码专栏收录该内容

44 篇文章 2 订阅

订阅专栏

javascript 读取滚动条位置，文档总高度，页面高度，滚动条距离底端位置

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>监控滚动条位置</title>
        <style>
            p {
                height: 30px;
                line-height: 30px;
                background: #ddd;
                opacity: 0;
            }
        </style>
    </head>

    <body>
        <div id="show" style="position: fixed;top: 150px;">
            
        </div>
        <div>
            <p>你好，china！</p>
            <p>你好，china！</p>
            <p>你好，china！</p>
            <p>你好，china！</p>
            <p>你好，china！</p>
            <p>你好，china！</p>
            <p>你好，china！</p>
            <p>你好，china！</p>
            <p>你好，china！</p>
            <p>你好，china！</p>
            <p>你好，china！</p>
            <p>你好，china！</p>
            <p>你好，china！</p>
            <p>你好，china！</p>
            <p>你好，china！</p>
            <p>你好，china！</p>
            <p>你好，china！</p>
            <p>你好，china！</p>
            <p>你好，china！</p>
            <p>你好，china！</p>
            <p>你好，china！</p>
            <p>你好，china！</p>
        </div>
    </body>
    <script>
        //获取窗口可视范围的高度
        function getClientHeight(){  
            var clientHeight=0;  
            if(document.body.clientHeight&&document.documentElement.clientHeight){  
                var clientHeight=(document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
            }else{  
                var clientHeight=(document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
            }  
            return clientHeight;  
        }
        function getScrollTop(){  
            var scrollTop=0;  
            if(document.documentElement&&document.documentElement.scrollTop){  
                scrollTop=document.documentElement.scrollTop;  
            }else if(document.body){  
                scrollTop=document.body.scrollTop;  
            }  
            return scrollTop;  
        }

        function getScrollHeight(){  
            return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);  
        }

        window.οnscrοll=function(){
            // 窗口可视范围的高度
            var height=getClientHeight(),
                // 窗口滚动条高度
                theight=getScrollTop(),
                // 窗口可视范围的高度
                rheight=getScrollHeight(),
                // 滚动条距离底部的高度
                bheight=rheight-theight-height;
                
            document.getElementById('show').innerHTML='此时浏览器可见区域高度为：'+height+'<br />此时文档内容实际高度为：'+rheight+'<br />此时滚动条距离顶部的高度为：'+theight+'<br />此时滚动条距离底部的高度为：'+bheight;
        }
    </script>

</html>

小蒜瓣

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
javascript 读取滚动条位置，文档总高度，页面高度，滚动条距离底端位置

javascript 读取滚动条位置，文档总高度，页面高度，滚动条距离底端位置&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;监控滚动条位置&lt;/title&gt; &lt;style&
复制链接

扫一扫

专栏目录