Recently, I ventured into the world of JavaScript and attempted to create a script that can detect when a user reaches the end of a div tag. After some searching, I came across this code snippet:
<!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>
This code worked perfectly for me. However, when I made some changes like:
- Removing the class
- Replacing the class name with an ID
The updated script looks like this:
<script type="text/javascript">
jQuery(
function($)
{
$('#myExample').bind('scroll', function()
{
if($(this).scrollTop() + $(this).innerHeight()>=$(this)[0].scrollHeight)
{
alert('end reached');
}
})
}
);
</script>
Here is the modified body section:
<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>
Unfortunately, the updated code does not work anymore. The issue might be because it no longer has the .container class. I'm in need of assistance. https://i.sstatic.net/jDXKW.png