Question

我想检查用户是否已使用jquery滚动到页面底部。我搜索并找到了可以在Microsoft Edge上完美运行的解决方案，但在Google Chrome上无法正常运行。

$(document).ready(function(){
$(window).scroll(function() {   
if($(window).scrollTop() + $(window).height() == $(document).height()) {
   alert("bottom!");
}
});
});

<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height: 4000px">Scroll down!</div>

Microsoft Edge中的输出：非常理想。

在Google Chrome浏览器中输出：在Google Chrome浏览器中，当我滚动到底部并再次滚动到顶部时，它可以工作，但我不希望这样做。

Answer 1

它在Google chrome上也可以正常工作。检查一下

$(document).ready(function(){
$(window).scroll(function() {   
if($(window).scrollTop() + $(window).height() == $(document).height()) {
   alert("bottom!");
}
});
});

<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>

<div style="height: 4000px">Scroll down!</div>

如果您想要一个基于javascript的纯解决方案，那么就可以了：

window.onscroll = function(ev) {
    if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
        alert("you're at the bottom of the page");
    }
};

<div style="height:5000px"></div>

Answer 2

要获得所有浏览器的兼容性，请尝试this method

function getDocHeight() {
    var D = document;
    return Math.max(
        D.body.scrollHeight, D.documentElement.scrollHeight,
        D.body.offsetHeight, D.documentElement.offsetHeight,
        D.body.clientHeight, D.documentElement.clientHeight
    );
}

用此功能替换$(document).height()，一切都很好

$(window).scroll(function() {
       if($(window).scrollTop() + $(window).height() == getDocHeight()) {
           alert("bottom!");
       }
});

检查用户是否已滚动到Jquery的底部[代码无法在Chrome上运行]

2 个答案: