js特效 - 1.判断是否到达底部 - 《JavaScript》

1.js实现
2.jquery实现
3.Math

1.js实现

    <style>
        * {margin: 0;padding: 0}
        body {
            height: 2000px;
            background: red;
        }
        div {
            height: 1000px;
            background: green;
        }
    </style>
<body>
    <div></div>
    <script src="lib/base.js"></script>
    <!-- 判断滚动条是否到达底部 -->
    <script>
            window.onscroll = function(){
            console.log(onReachBottom())
        }
    </script>
    base.js
    function onReachBottom(){
    /* 获取滚动区域的高度 */
    var dh = document.documentElement.scrollHeight;
    var sh = Math.ceil(document.documentElement.scrollTop);
    var ah = document.documentElement.clientHeight;
    return sh+ah==dh?true:false;
}

2.jquery实现

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <style>
        body{
            height: 2000px;
            background: red;
        }
    </style>
</head>
<body>
    <script>
        var scrollHeight = $(document).height();
        var clientHeight = $(window).height();
        $(window).scroll(function(){
            var scrollTop = $(document).scrollTop();
            if(clientHeight+scrollTop==scrollHeight){
                console.log("已经到达底部")
            }
        })
    </script>
</body>
封装
function onReachBottom() {
    var dh = $(document).height();
    var sh = $(window).scrollTop();
    var wh = $(window).height();
    return (Math.ceil(sh + wh) == dh) ? true : false;
}

3.Math

    <script>
        /* Math.ceil() 上取整
        Math.floor() 下取整
        Math.round()  四舍五入取整
         */
        var a = 12.34;
        console.log(Math.ceil(a))
        console.log(Math.floor(a))
        console.log(Math.round(a))
    </script>