Detect when user reaches end of div in HTML using JavaScript

Question

I am new to JavaScript but this days i have tried to write a code that detect when user reach end of div tag. I found this code :

<!DOCTYPE HTML> 
<html> 

<head> 
  <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> 
</script> 
</head> 
<style type="text/css">
.container{width:200px;height:150px;overflow:auto;}
</style>
<body>
  <div class="container">
Lorem ipsum dolor sit amet <br>
Consectetuer augue nibh lacus at <br>
Pretium Donec felis dolor penatibus <br>
Phasellus consequat Vivamus dui lacinia <br>
Ornare nonummy laoreet lacus Donec <br>
Ut ut libero Curabitur id <br>
Dui pretium hendrerit sapien Pellentesque <br>

</div>

</body>

    <script type="text/javascript"> 
jQuery(
  function($)
  {
    $('.container').bind('scroll', function()
    {
      if($(this).scrollTop() + $(this).innerHeight()>=$(this)[0].scrollHeight)
        {
           alert('end reached');
        }
     })
  }
);
    </script>
  
</html>

and it works great.But when i edit code like

remove class
replace class name with id and now it looks like

my script is

    <script type="text/javascript"> 
jQuery(
  function($)
  {
    $('#myExample').bind('scroll', function()
    {
      if($(this).scrollTop() + $(this).innerHeight()>=$(this)[0].scrollHeight)
        {
           alert('end reached');
        }
     })
  }
);
    </script>

and body

<body>
  <div id="myExample" style="margin-bottom: 1000px">
Lorem ipsum dolor sit amet <br>
Consectetuer augue nibh lacus at <br>
Pretium Donec felis dolor penatibus <br>
Phasellus consequat Vivamus dui lacinia <br>
Ornare nonummy laoreet lacus Donec <br>
Ut ut libero Curabitur id <br>
Dui pretium hendrerit sapien Pellentesque <br>

</div>

</body>

It wont work now.I dont know why.Maybe because it doesn't have .container class. I need help

Does this answer your question? [Detecting when user scrolls to bottom of div with jQuery](https://stackoverflow.com/questions/6271237/detecting-when-user-scrolls-to-bottom-of-div-with-jquery) — Manas Khandelwal, Jan 12 '21 at 17:10
I just checked your code and it works with `#myExample`. What errors are you getting in the console? — s.kuznetsov, Jan 12 '21 at 17:29
@s.kuznetsov which code do you check (first or after my edit) — Nikola Marinov, Jan 12 '21 at 17:31
I have a counter question. Have you set the selector `#myExample` instead of `.container`, inside the `` tag? — s.kuznetsov, Jan 12 '21 at 17:34
Then do it. Because your styles create scrolling (**overflow:auto**) by limiting the **height** and **width** of the element. — s.kuznetsov, Jan 12 '21 at 17:38
Should be so - `#myExample{width:200px;height:150px;overflow:auto;}` — s.kuznetsov, Jan 12 '21 at 17:39
ok change inline style style="width:200px;height:1000px;overflow: auto;" and it is not working — Nikola Marinov, Jan 12 '21 at 17:45
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/227218/discussion-between-s-kuznetsov-and-nikola-marinov). — s.kuznetsov, Jan 12 '21 at 17:50

score 1 · Accepted Answer · answered Jan 12 '21 at 18:18

First, don't use bind(). This method is obsolete. Use on() method:

$('#myExample').on('scroll', function()
...

Second, to achieve scrolling, the container needs to be made smaller in relation to the size of the text. To do this, I wrapped the text in an additional div, giving the id name myExample_text. This div needs to set the desired height of 1000 pixels:

<div id="myExample_text" style="height: 1000px;">
...
</div>

And set the parent div (#myExample) to the smallest height to achieve scrolling.

Here's a complete solution.

<!DOCTYPE HTML> 
<html>
   <head>
      <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script> 
   </head>
   <body>
      <div id="myExample" style="width: 200px; height: 150px; overflow: auto; margin-bottom: 1000px">
         <div id="myExample_text" style="height: 1000px;">
            Lorem ipsum dolor sit amet <br>
            Consectetuer augue nibh lacus at <br>
            Pretium Donec felis dolor penatibus <br>
            Phasellus consequat Vivamus dui lacinia <br>
            Ornare nonummy laoreet lacus Donec <br>
            Ut ut libero Curabitur id <br>
            Dui pretium hendrerit sapien Pellentesque <br>
         </div>
      </div>
   </body>
   <script type="text/javascript"> 
      jQuery(
        function($)
        {
          $('#myExample').on('scroll', function()
          {
            if($(this).scrollTop() + $(this).innerHeight()>=$(this)[0].scrollHeight)
              {
                 alert('end reached');
              }
           })
        }
      );         
   </script>
</html>

Detect when user reaches end of div in HTML using JavaScript

1 Answers1