How can I determine if a div is scrolled to the bottom?
JavascriptScrollScrollbarJavascript Problem Overview
How do I determine, without using jQuery or any other JavaScript library, if a div with a vertical scrollbar is scrolled all the way to the bottom?
My question is not how to scroll to the bottom. I know how to do that. I want to determine if the the div is scrolled to the bottom already.
This does not work:
if (objDiv.scrollTop == objDiv.scrollHeight)
Javascript Solutions
Solution 1 - Javascript
You're pretty close using scrollTop == scrollHeight.
scrollTop refers to the top of the scroll position, which will be scrollHeight - offsetHeight
Your if statement should look like so (don't forget to use triple equals):
if( obj.scrollTop === (obj.scrollHeight - obj.offsetHeight))
{
}
Edit: Corrected my answer, was completely wrong
Solution 2 - Javascript
In order to get the correct results when taking into account things such as the possibility of a border, horizontal scrollbar, and/or floating pixel count, you should use...
el.scrollHeight - el.scrollTop - el.clientHeight < 1
NOTE: You MUST use clientHeight instead of offsetHeight if you want to get the correct results. offsetHeight will give you correct results only when el doesn't have a border or horizontal scrollbar
Solution 3 - Javascript
Little late to this party, but none of the above answers seem to work particularly well when...
- Display scaling is applied to the OS for UHD displays
- Scaling/zoom is applied to the browser
To accommodate for all eventualities, you will need to round up the calculated scroll position:
Math.ceil(element.scrollHeight - element.scrollTop) === element.clientHeight
Solution 4 - Javascript
Returns true if an element is at the end of its scroll, false if it isn't.
element.scrollHeight - element.scrollTop === element.clientHeight
Solution 5 - Javascript
function difference(first,sec){
return Math.abs(first-sec);
}
document.getElementById("myDIV").addEventListener("scroll", function() {
var diff = difference((this.scrollTop+this.clientHeight),(this.scrollHeight));
if(diff < 5) {
alert('Scroll Ends Here');
}
});
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
height: 250px;
width: 250px;
overflow: none;
overflow-y: auto;
}
#content {
height: 800px;
width: 2000px;
background-color: coral;
}
</style>
</head>
<body>
<p>Scroll inside the div element to display the number of pixels the content of div is scrolled horizontally and vertically.</p>
<div id="myDIV">
<div id="content">Scroll inside me!</div>
</div>
<p id="demo"></p>
</body>
</html>
No JQuery or Javascript Library and it works well.
Solution 6 - Javascript
<!DOCTYPE HTML>
<html>
<head>
<title>JQuery | Detecting when user scrolls to bottom of div.
</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<body style="text-align:center;" id="body">
<h1 style="color:green;">
Data Center
</h1>
<p id="data_center" style="font-size: 17px; font-weight: bold;"></p>
<center>
<div class="div" style="width:200px; height:150px; overflow:auto;">
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
</div>
</center>
<script>
$('#data_center').text('Scroll till bottom to get alert!');
jQuery(function($) {
$('.div').on('scroll', function() {
if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
alert('End of DIV has reached!');
}
});
});
</script>
</body>
</html>
It works for me, i hope, this will also help you. Thanks.
Solution 7 - Javascript
This one works for me. Slightly a different approach.
if (list.scrollTop + list.clientHeight >= list.scrollHeight - 1) {
return 'scrollOnTheBottom';
}
Solution 8 - Javascript
The solution i found on https://www.geeksforgeeks.org/how-to-detect-when-user-scrolls-to-the-bottom-of-a-div/ Worked for me, hope it will work for you too.
$(window).on('scroll', function() {
if ($(window).scrollTop() >= $(
'.div').offset().top + $('.div').
outerHeight() - window.innerHeight) {
alert('You reached the end of the DIV');
}
});