您可以尝试以下代码，

$("#dashboard-scroll").scroll(function(){
    var ele = document.getElementById('dashboard-scroll');
    if(ele.scrollHeight - ele.scrollTop === ele.clientHeight){
       console.log('at the bottom of the scroll');
    }
});

如果有人想要一个香草的JavaScript解决方案，需要检测当用户滚动到<div>的底部时，我设法通过使用这些代码行实现它

window.addEventListener("scroll", () => {
    var offset = element.getBoundingClientRect().top - element.offsetParent.getBoundingClientRect().top;
    const top = window.pageYOffset + window.innerHeight - offset;

    if (top === element.scrollHeight) {
        console.log("bottom");
    }
}, { passive: false });

下面是最简单的方法:

const handleScroll = () => {
if (window.innerHeight + window.pageYOffset >= document.body.offsetHeight) {
   console.log('scrolled to the bottom')
}}

window.addEventListener('scroll', handleScroll)

我用这个测试来检测滚动到达底部: event.target.scrollTop === event.target.scrollHeight - event.target.offsetHeight

我在纯js中的解决方案:

let el=document.getElementById（'el'）; el.addEventListener（'scroll'， function（e） { if （this.scrollHeight - this.scrollTop - this.clientHeight<=0） { 警报（“底部”）; } }); #el{ 宽度：400px; 高度：100px; 溢出-y：滚动; } <div id=“el”> <div>内容</div> <div>内容</div> <div>内容</div> <div>内容</div> <div>内容</div> <div>内容</div> <div>内容</div> <div>内容</div> <div>内容</div> <div>内容</div> <div>内容</div> </div>

TL; diana;

Math.abs(element.scrollHeight - element.scrollTop - element.clientHeight) < 1

概念

在其核心，“已经滚动到底部”指的是可滚动区域(scrollHeight)减去可见内容到顶部(scrollTop)的距离等于可见内容的高度(clientHeight)的时刻。

换句话说，当这个等价为真时，我们被“滚动”::

scrollHeight - scrollTop - clientHeight === 0

防止舍入错误

但是，如上所述，其中一些属性是四舍五入的，这意味着在scrollTop有小数组件或四舍五入值对齐不好的情况下，相等性可能会失败。

通过将绝对差异与可容忍的阈值进行比较，可以缓解这个问题:

Math.abs(element.scrollHeight - element.clientHeight - element.scrollTop) < 1

防止舍入错误的代码片段如下所示:

. getelementbyid(“constrained-container”)。addEventListener('scroll'， event => { const {scrollHeight, scrollTop, clientHeight} = event.target; 如果(数学。abs(scrollHeight - clientHeight - scrollTop) < 1) { console.log(滚动); ｝ })； # constrained-container { 身高:150 px; overflow-y:滚动; ｝ # very-long-content { 身高:600 px; ｝ < div id = " constrained-container " > < div id = " very-long-content " > 把我滚动到底部 < / div > < / div >

注意，我添加了一个div，对于它的容器来说，它太大了，无法强制滚动，但没有必要将内容“包装”到另一个元素中，直接在元素中输入文本会使元素溢出。

跳脱，延迟和节流

我对它了解得越多，我发现它在这个答案的范围内就越少(这个codereview问题及其答案，以及这篇链接的文章都很有趣)，但在特定情况下(如果处理程序执行昂贵的计算，如果我们将动画绑定到滚动事件，如果我们只想在滚动运动结束时启动事件，或者任何可能保证它的情况)，它可以用于:

Debounce(当第一次滚动发生时触发处理程序，然后防止它太快触发)， 延迟(阻止处理程序的执行，直到滚动事件在一段时间内没有触发。这在Ecmascript上下文中通常被称为deboning)， 或者节流(防止训练者在一段时间内射击一次以上)。

在选择做这些事情时必须非常小心，例如，限制事件可以防止最后一个卷轴发射，这可能会完全击败无限卷轴。

大多数时候，不做这三件事中的任何一件都是完美的，因为仅仅看看我们是否完全滚动是相对便宜的。