javascript – Detecting continuious scrolling after end of page scroll-ThrowExceptions

Exception or error:

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.

How to solve:

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();
    }
});

###

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

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

Behzad fartash

Leave a Reply

Your email address will not be published. Required fields are marked *