Question

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

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

$('.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个。

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

这是可行的，但使用点击功能。 http://jsfiddle.net/nFd7C/327/

任何指针或帮助表示赞赏。：）

Answer 1

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

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

DEMO 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();

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

1 个答案: