How can I determine if a div is scrolled to the bottom?
Question
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)
8 answers
solution1
127 ACCPTED 2009-05-18 03:26:46
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
solution2
35 2017-03-17 15:07:15
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
solution3
14 2017-07-03 20:25:31
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
solution4
9 2015-01-26 08:39:02
Returns true if an element is at the end of its scroll, false if it isn't.
element.scrollHeight - element.scrollTop === element.clientHeight
solution5
1 2021-07-03 17:58:08
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.
solution6
0 2019-12-07 12:36:46
<!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.
solution7
0 2020-02-25 19:13:16
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)
solution8
0 2020-10-06 10:51:18
This one works for me. Slightly a different approach.
if (list.scrollTop + list.clientHeight >= list.scrollHeight - 1) {
return 'scrollOnTheBottom';
}
solution9
0 2020-10-12 06:00:05
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');
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.