从元素底部计算像素

Question

我正在尝试创建一个滚动条，当用户接近元素的底部时会加载内容但是当用户滚动时，我正在努力计算元素底部#grid的当前距离。

$(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
    var div = $('#grid');
    var bottom = ((div.offset().top + div.height()) - scroll);

    $('.scroll').html(bottom);
});

.scroll元素显示值，尽管它似乎没有给出正确的数字。任何想法，我都会停滞不前。我似乎是从窗口顶部到容器底部的距离，而不是从当前滚动位置？

返回页首

向下滚动

Answer 1

您还需要添加窗口的高度。

$(window).scroll(function (event) {
    var scrollBottom = $(window).scrollTop() + $(window).height();
    var div = $('#grid');
    var bottom = ((div.offset().top + div.height()) - scroll);

    $('.scroll').html(bottom);
});

如果bottom的负数小于窗口高度，则屏幕上会显示#grid div的底部。