如何检查滚动条是否接近底部

Question

我在我的React应用程序中有一个下拉列表：当滚动到底部时，我从后端获取下一组元素，因此我的下拉列表是动态的。我想知道是否已经滚动到了列表底部 - 如果是，则我想获取下一批元素。如何检查是否已经到了获取下一批元素的时间？

<Content>
        <MySelectField onClick={handleOnClick} onScroll={handleOnScroll}>

function handleOnScroll(e) {
        const { scrollTop, scrollHeight, offsetHeight } = e.target;
        if (offsetHeight - scrollTop < 50) {
            handleLoadNextElements();
        }
    }

我滚动列表到底部时，应该使用什么条件来获取下一个元素？

- Matley

Answer 1

这应该适用于垂直滚动。解决方案基于在React js中检测用户滚动到div底部。

function handleOnScroll(e) {
    const bottom = e.target.scrollHeight - e.target.clientHeight <= e.target.scrollTop + 50;
    if (bottom) {
        handleLoadNextElements();
    }
}

如果您想要与移动设备完全兼容，您可能需要查看这个库，它在移动设备上运行得非常完美。react-bottom-scroll-listener

- Ramon jansen gomez

Answer 2

我通过在我的 div 上添加 onScroll 来解决了我的问题：

 <TemplateSelectField
                    onClick={handleOnClick}
                    onScroll={handleOnScroll}
                >

然后：

function handleOnScroll(e) {
        const { scrollTop, scrollHeight, offsetHeight } = e.target;
        const hasScrollReachedBottom =
            offsetHeight + scrollTop > scrollHeight - 40;

        if (hasScrollReachedBottom) {
            handleLoad();
        }
    }

工作得非常好：）

- Matley