JS判断滚动条距离底部的距离

Js+JQuery helloweb 次浏览 已收录 评论() 扫描二维码
扫描二维码

JS判断滚动条距离底部的距离,将代码复制本地运行即可看到效果;

当实现一个元素需要参照底部计算的效果时,可参考一下代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>滚动条距离底部的距离</title>
    </head>
    <body>
        <div class="box">
            <div style="height:10000px;"></div>
        </div>
        <script>
            window.addEventListener('scroll',function(){
               console.log("目前滚动条和最上方的距离多长:",document.documentElement.scrollTop);
                console.log("整个滚动条多长:",document.documentElement.scrollHeight);
                console.log("网页可见区域:",document.documentElement.clientHeight);
                console.log("距离底部距离多长:",document.documentElement.scrollHeight - document.documentElement.scrollTop - document.documentElement.clientHeight);
            })
        </script>
    </body>
</html>

示例:

$(function(){
    $(window).scroll(function() {
        var scrollBottom = document.documentElement.scrollHeight - document.documentElement.scrollTop - document.documentElement.clientHeight;
	console.log(scrollBottom);
	if(scrollBottom < 329){ // 当滚动条距离底部指定距离时
            $('.right-article .fixed').css({'position':'absolute'})
	}else{
	    $('.right-article .fixed').css({'position':'fixed'})
	}
    })
})


原文链接:HelloWeb前端网 » JS判断滚动条距离底部的距离 » 感谢您的浏览,希望能有所帮助。

欢迎您加入“Helloweb” 学习交流群:HelloWeb-学习交流群 196291215 共同交流并结识同行,在这里说出您的收获与感想或有什么不同的观点,我们期待您的留言,分享,让我们一起进步!

喜欢 ()or分享