проверьте, что пользователь прокрутил до конца в 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

Для совместимости во всех браузерах, попробуйте этот метод

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!");
       }
});

Answer 2

Работает нормально, как и на 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>