Question

我一直在jsFiddle上关注这个例子：http://jsfiddle.net/jackdent/gRzPF/12/

...当用户到达当前显示内容的末尾时自动加载更多内容。 不幸的是，当.content div在CSS中具有设置的高度（以像素为单位）时，该示例似乎才有效。

如何在不设置高度的情况下实现所需的结果？我在单个页面上获得了大量信息，分为几个部分，我希望在用户滚动到它之前隐藏它，此时它会出现。

一直在看无限滚动插件，但所有示例似乎只适用于远程内容。我基本上需要相同的东西，但对于一页上的内容。我只能胜任HTML / CSS，我可以插入jQuery并稍微调整一下值，但是对它来说太糟糕了......

的jQuery

//Set intital divs to be hidden
$(".content").addClass("noshow");
    var contentNumber = 0;

    function reveal() {
        var constraintNumber = contentNumber + 6;
        //IMPORTANT - DO NOT DELETE
        $(window).trigger('resize');
        //IMPORTANT - DO NOT DELETE
        for (i = contentNumber; i < constraintNumber; i++) {
            //Get the nth div of class content, where n is the contentNumber, and make it shown
            $('.content').eq(contentNumber).removeClass("noshow");
            contentNumber ++;
        }
    }

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

HTML

<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>

CSS

.content {
    margin: 1px;
    width: 200px;
    height: 400px;
    border: 1px solid black;
    float: left;
    background-color: gray;
}

.noshow{
    display: none;
}

Answer 1

将高度设置为“自动”。在将更多内容添加到DIV之后，我成功地尝试了你的小提琴。

Answer 2

即使没有设置高度，它也会滚动。确保div中有足够数量的div具有类'content'和内容，这将在首页加载时创建滚动条。

您可以尝试从css中删除float：left

滚动 - jQuery在到达时显示隐藏的内容

2 个答案: