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

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

它在谷歌浏览器上也能正常工作。检查这个

$(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>