javascript - 使用滚动事件显示基于窗口高度的元素

Question

我想根据滚动条和窗口的位置显示元素。

我想要实现的技术类似于 infinite loading

当前 fiddle :http://jsfiddle.net/fxJ7s/14/

$('.item:gt(5)').hide();

function loadMore() {

    var items = $(".item").length;
    var shown = 6;

    shown = $('.item:visible').length + 3;
    console.log(shown);

    if (shown < items) {
        $('.item:lt(' + shown + ')').show();
    }

    $(window).bind('scroll', bindScroll);
}

function bindScroll() {
    if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
        $(window).unbind('scroll');
        loadMore();
    }
}

$(window).scroll(bindScroll);

现在，我隐藏了除前 6 个元素之外的所有元素。然后当用户向下滚动时，将显示下一个 3 个元素。我可以在控制台中看到它们变得可见，但我不希望它们同时全部出现。理想情况下会出现 3 个，然后随着窗口高度的滚动再出现 3 个。

似乎在前 3 个可见后窗口的高度没有更新？

这是一个可以工作的东西，但是有一个点击功能。 http://jsfiddle.net/nFd7C/327/

感谢任何指点或帮助。 :)

Answer 1

我之前回答过类似的问题。根据我的经验，在这种情况下，最好的方法是在用户滚动到页面末尾时运行一个函数，该函数循环显示可见的元素，然后取消隐藏另外 9 个元素。当用户每次滚动到页面末尾时，都会重复此函数。

我整理了一个简单的例子来说明我的回答背后的逻辑。我看到您正在使用 CSS 框架。为了这个示例，我使用了带有 !important 声明的 CSS 规则来覆盖您的框架。我不建议使用 !important，而是使用一个单独的自定义样式表，在需要时覆盖框架规则。

演示 http://jsfiddle.net/fxJ7s/15/

$(".item").addClass("noshow");
var contentNumber = 0;

function reveal() {
    var constraintNumber = contentNumber + 9;
    for (i = contentNumber; i < constraintNumber; i++) {
        $('.item').eq(contentNumber).removeClass("noshow");
        contentNumber++;
    }
}

//Window scroll function
$(window).scroll(function () {
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {
        reveal();
    }
});
reveal();