Open georgedaqu opened 3 years ago
Hi @georgedaqu!
I use this solution in my project:
const simpleBar = new SimpleBar(document.getElementById('myElement'));
simpleBar.getScrollElement().addEventListener('scroll', scrollHandler, { passive: true });
function scrollHandler (event) {
const { scrollHeight, scrollTop, clientHeight } = event.target;
const isBottomReached = (scrollHeight - Math.round(scrollTop) === clientHeight);
if (isBottomReached) {
// You have reached the bottom of the container
}
}
The exact calculation of reaching the bottom I got from MDN: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#checking_that_the_user_has_read_a_text
I hope this helps 😉
Thank you @sgromkov it worked. Only there is a typo on "function" and it made me thinking what was wrong for a while :))
Thank you @sgromkov it worked. Only there is a typo on "function" and it made me thinking what was wrong for a while :))
Oh, thank you @georgedaqu for your response. I have fixed functon
in my previous comment. Thanks! Glad to hear it works for you too.
@Grsmto looks like the Issue can be closed 😃
Hi @georgedaqu!
I use this solution in my project:
const simpleBar = new SimpleBar(document.getElementById('myElement')); simpleBar.getScrollElement().addEventListener('scroll', scrollHandler, { passive: true }); function scrollHandler (event) { const { scrollHeight, scrollTop, clientHeight } = event.target; const isBottomReached = (scrollHeight - Math.round(scrollTop) === clientHeight); if (isBottomReached) { // You have reached the bottom of the container } }
The exact calculation of reaching the bottom I got from MDN: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#checking_that_the_user_has_read_a_text
I hope this helps 😉
thank you so much bro 👍
if i'm using the data-simplebar directly in div
how should i use the this method
const simpleBar = new SimpleBar(document.getElementById('myElement'));
simpleBar.getScrollElement().addEventListener('scroll', scrollHandler, { passive: true });
function scrollHandler (event) { const { scrollHeight, scrollTop, clientHeight } = event.target; const isBottomReached = (scrollHeight - Math.round(scrollTop) === clientHeight);
if (isBottomReached) {
// You have reached the bottom of the container
}
}
Hi there!
How can I detect when the scrollbar reaches the end of the content? Also I need to detect when it leaves the end of the content.
Thank you