Detecting continuious scrolling after end of page scroll

Question

I'm trying to detect continuing scrolling at the bottom of the page.

The page shows more information when reached at the end of the page but I want to show that when people scroll more at the end.

I can detect the end of the scroll, but I want to detect if people are continuing to scroll.

<!-- language: lang-js -->
function scrolling() {
    let scrollView = document.getElementById('field-scroll');
    if ($(scrollView).scrollTop() + $(scrollView).innerHeight() >= $(scrollView)[0].scrollHeight) {
        alert('end of the bottom. but I want to show it when doing more scroll not immediately');
    }
}

<div id='field-scroll' onscroll='scrolling()'>
   ...
</div>

Thank you for your help.

Does this answer your question? [Javascript: How to detect if browser window is scrolled to bottom?](https://stackoverflow.com/questions/9439725/javascript-how-to-detect-if-browser-window-is-scrolled-to-bottom) — Joseph Sible-Reinstate Monica, Feb 24 '20 at 03:50
@JosephSible-ReinstateMonica No, mine is working as same as your comment. I want to detect 'More Scrolls' at the bottom. — Eugene Fitzher, Feb 24 '20 at 03:53

huytc · Accepted Answer · 2020-02-24T06:08:12.670

2

You can add a variable to indicate the first-time end of scroll, and then check that variable to know if the user continued scrolling.

function scrolling()
{
    let scrollView = document.getElementById('field-scroll');

    if($(scrollView).scrollTop() + $(scrollView).innerHeight()>=$(scrollView)[0].scrollHeight)
    {
        // first end of scroll
        window.endOfScroll = true;
    } else {
        // unset the variable
        window.endOfScroll = null;
    }
}

Also, you need to listen for scrolling events. Add these outside of the scrolling function.

const scrollView = document.getElementById('field-scroll');

// mouse wheel
scrollView.addEventListener("wheel", event => {
    const direction = Math.sign(event.deltaY);
    // if user is scrolling down at end of scroll
    if (direction === 1 && window.endOfScroll) {
        showMore();
    }
});

// down arrow
scrollView.addEventListener("keydown", event => {
    // if user is pressing down arrow at end of scroll
    // 40 is the keycode for down arrow
    if (event.keyCode === 40 && window.endOfScroll) {
        showMore();
    }
});

edited Feb 24 '20 at 06:08

answered Feb 24 '20 at 03:59

huytc

1,074
7
20

The problem is, when reached to bottom, onscroll doesn't work for bottom. ( becuase no scroll height left for bottom. ) It means, need to scroll up, and down. And I think, it is not good experience to user.. I just wander is there any 'trick' for it. By the way, thanks for the answer :) – Eugene Fitzher Feb 24 '20 at 04:30
@EugeneFitzher I have updated the answer. See if it can help you :) – huytc Feb 24 '20 at 05:32
Thanks <3 I changed direction value to 1 ( heading bottom ), and it wokrs fine. ! ! – Eugene Fitzher Feb 24 '20 at 06:05
1

@EugeneFitzher Glad it helped you. I thought scrolling down was -1, my bad. I'll update the answer. – huytc Feb 24 '20 at 06:07

score 1 · Answer 2 · answered Feb 24 '20 at 05:23

1

se the .scroll() event on window, like this:

    $(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       alert("bottom!");
   }
});

Behzad fartash

answered Feb 24 '20 at 05:23

Behzad F94

198
2
5

Detecting continuious scrolling after end of page scroll

2 Answers2