时间戳

首页 > 解决方案 > 如何检查滚动是否靠近底部

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

问题描述

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

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

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

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

标签： javascriptreactjs

解决方案

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

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

如果你想与移动设备完全兼容，你可能想看看这个库，它可以在移动设备上完美运行。反应底部滚动监听器

推荐阅读