How can I detect scroll end of the specified element by JavaScript?
25,998
Fixed.
document.getElementById('box').addEventListener(
'scroll',
function()
{
var scrollTop = document.getElementById('box').scrollTop;
var scrollHeight = document.getElementById('box').scrollHeight; // added
var offsetHeight = document.getElementById('box').offsetHeight;
// var clientHeight = document.getElementById('box').clientHeight;
var contentHeight = scrollHeight - offsetHeight; // added
if (contentHeight <= scrollTop) // modified
{
// Now this is called when scroll end!
}
},
false
)
Related videos on Youtube
Author by
Japboy
I like open standards and semantic markup. Noob coder.
Updated on September 03, 2020Comments
-
Japboy over 3 years
I'm using Google Chrome 10 and writing JavaScript to detect scroll end.
To detect scroll end of
window
, the code below worked fine:window.addEventListener( 'scroll', function() { var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var offerHeight = document.body.offsetHeight; var clientHeight = document.documentElement.clientHeight; if (offsetHeight <= scrollTop + clientHeight) { // Scroll end detected } }, false );
Now I want to detect scroll end of the specified element, like
<section id="box" style="height: 500px; overflow: auto;">
This is the code that doesn't detect correctly:document.getElementById('box').addEventListener( 'scroll', function() { var scrollTop = document.getElementById('box').scrollTop; var offerHeight = document.getElementById('box').offsetHeight; var clientHeight = document.getElementById('box').clientHeight; if (offsetHeight <= scrollTop + clientHeight) { // This is called before scroll end! } }, false );
Could someone please fix my code? Thanks.
-
Jesus Cabrita about 2 yearsthank u so much! this is perfect