javascript - 从元素底部计算像素

Question

我正在尝试创建一个滚动条，当用户接近元素底部时加载内容，但是当用户滚动。

$(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()) - scrollBottom);

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

如果 bottom 为负值且小于窗口高度，则 #grid div 的底部在屏幕上可见。