To Check "user has scrolled to the bottom code" is not working on chrome but it works on Microsoft Edge. WHY?

Question

I use this code to check whether user has scrolled to the bottom code or not but it don't work on Google Chrome but it successfully works on Microsoft Edge.

In Google Chrome when i scroll to bottom and again scroll to top then it works but I don't know why.

Here is the code i am using.

<script>

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

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

Possible duplicate of [Check if a user has scrolled to the bottom](https://stackoverflow.com/questions/3898130/check-if-a-user-has-scrolled-to-the-bottom) — Vignesh Raja, Jul 17 '18 at 17:26

Louys Patrice Bessette · Answer 1 · 2018-07-17T18:22:24.787

Assuming you use a div to load some data... (Because of #load_data)

You need to get 3 values on scroll:

The scrolled position
The div height
The div scrollable height

This last one is an element property of the real element height, including its overflow.

Additionnally, you need to define what's near the bottom... In pixels.

So... In the below example, I'm faking an Ajax request. Just look for the code you need.

$(document).ready(function() {

  // Function to replace Ajax in this demo.
  function createContent(n){
    var fakeContent = "";
    for(i=0;i<n;i++){
      fakeContent += i+"<br>";
    }
    $("#load_data").append(fakeContent);
  }
  // Simulate initial content...
  createContent(100);

  // The code you need
  var near = 20; // pixels buffer yet to be scrolled when the Ajax triggers.
  
  $("#load_data").on("scroll",function(){
    if( $(this).scrollTop() + $(this).height() + near > this.scrollHeight ){
      console.log("Faking Ajax...");
      createContent(50);
    }
  });

});  // END ready

#load_data{
  height: 150px;
  width: 300px;
  border: 1px solid grey;
  overflow-y:scroll;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

There is 100 (0-99) lines on load.<br>
<div id="load_data"></div>

Emeeus · Answer 2 · 2018-07-17T18:58:35.687

The problem is when you use margin (top or bottom) you should use .outerHeight(true) instead of .height or the sum of height and margin in this case. If you have padding is the same issue.

$(window).scroll(function(){
   if($(window).scrollTop()+$(window).height()>$("h3").outerHeight( true ) ){

       alert("bottom!")

   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<h3 style="margin-top:2000px">hello world</h3>
</body>
<html>

About .outerHeight()

Get the current computed outer height (including padding, border, and optionally margin) for the first element in the set of matched elements or set the outer height of every matched element

.

To Check "user has scrolled to the bottom code" is not working on chrome but it works on Microsoft Edge. WHY?

2 Answers2