JS判断滚动条距离底部的距离--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” 学习交流群： 196291215 共同交流并结识同行，在这里说出您的收获与感想或有什么不同的观点，我们期待您的留言，分享，让我们一起进步！