javascript - 如何检查滚动条是否靠近底部

Question

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

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

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

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

Answer 1

这应该适用于垂直滚动。基于Detecting when user scrolls to bottom of div with React js的解决方案

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

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