检查用户已在 Jquery 中滚动到底部 [代码不适用于 Chrome]

Question

I wanted to check user has scrolled to the bottom of the page or not with jquery. I searched and find a solution which work perfectly on Microsoft Edge but it is not working fine on 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>

Output in Microsoft Edge: Perfect as I wants.

Output in Google Chrome: In Google Chrome when i scroll to bottom and again scroll to top then it works but I don't want this.

Answer 1

Its working fine as expected on google chrome as well. Check this

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

If you want a pure javascript based solution then here you go :

 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

For compatibility on all browsers, try 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
    );
}

Replace $(document).height() by this function and it's all good

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