js判断滚动条是否滚到底部

最新推荐文章于 2023-12-20 15:00:52 发布

熊叁(san)

最新推荐文章于 2023-12-20 15:00:52 发布

阅读量1.3k

点赞数

分类专栏：前端笔记

本文链接：https://blog.csdn.net/littlebearGreat/article/details/76685776

版权

前端笔记专栏收录该内容

126 篇文章 2 订阅

订阅专栏

如题，网上查找了一下，谢谢分享方法的大神，自己整理，代码如下

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>title</title>
	<script src="jquery.min.js"></script>
</head>
<body style="height: 2000px;">
</body>
<script>
	$(function(){

		// 取窗口滚动条高度
        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 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 getScrollHeight(){
            return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
        }

        // 判断是否到达底部
        function scrollAtBottom(){
            if (getScrollTop()+getClientHeight()==getScrollHeight()){
                return true;
            }else{
                return false;
            }
        }

		$(window).scroll(function(){
			if (scrollAtBottom()){
				console.log("到达底部");
			}else{
				console.log("没有到达底部");
			}
		})
	})
</script>
</html>