在页面滚动结束后检测连续滚动

Question

我正在尝试检测页面底部的持续滚动。

页面在到达页面末尾时会显示更多信息，但我想在人们滚动到页面末尾时显示更多信息。

我可以检测到滚动结束，但我想检测是否有人继续滚动。

<!-- 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>

感谢您的帮助。

Answer 1

您可以添加一个变量来指示第一次滚动结束，然后检查该变量以了解用户是否继续滚动。

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

此外，您需要监听滚动事件。在 scrolling 函数之外添加这些。

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

Answer 2

在 window 上使用 .scroll() 事件，如下所示：

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

贝扎德法塔什

在页面滚动结束后检测连续滚动

Detecting continuious scrolling after end of page scroll

html

javascript

scroll

lazy-loading