[jQuery]判断页面是否滚动到底部

 方法1：判断可见高度+滚动高度是否等于内容高度

但经过测试UC、QQ、华为浏览器，这个方法不生效。（打印查因：可能由于屏幕缩放，可见高度和滚动高度会偏小。

    $(this).scroll(function () {
        var viewHeight = document.body.clientHeight; //可见高度
        var contentHeight = $(".container").get(0).scrollHeight  //内容高度  
        var scrollHeight = $(this).scrollTop(); //滚动高度 
        if (viewHeight + scrollHeight >= contentHeight) {
            alert("到达底部了");
        }
    })

 

方法2：在页面底部放一个小div，然后判断这个div是否可见。

需要注意，如果这个 div (或者它的祖先元素)一开始 display:none，以下 rect 对象的 top bottom left right 属性值在此期间都为0。故最后的判断条件应该改为>0，不取边界值。这个 div 也不应该贴边放置。

    var isElementInViewport = function() {
        var doc = document.documentElement
        return function isElementInViewport(el) {
            // 获取元素是否在可视区域
            var rect = el.getBoundingClientRect();
            console.log('dom rect', rect)
            return (
                rect.top >= 0 && rect.left >= 0 &&
                rect.bottom <= (window.innerHeight || doc.clientHeight) &&
                rect.right <= (window.innerWidth || doc.clientWidth)
            );
        }
    }($('.bottom_div')[0])