Scroll end detection

[georgedaqu]

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

[sgromkov]

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 😉

[georgedaqu]

Thank you @sgromkov it worked. Only there is a typo on "function" and it made me thinking what was wrong for a while :))

[sgromkov]

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.

[sgromkov]

@Grsmto looks like the Issue can be closed 😃

[faizadie30]

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 👍

[VineeshAshwin002]

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
}

}