0

私はjsFiddleでこの例に従ってきました: http://jsfiddle.net/jackdent/gRzPF/12/

...ユーザーが現在表示されているコンテンツの最後に到達したときに、さらにコンテンツを自動的にロードします。残念ながら、この例は、CSS で .content div の高さがピクセル単位で設定されている場合にのみ機能するようです。

高さを設定せずに目的の結果を得るにはどうすればよいですか? 1 つのページに大量の情報があり、いくつかのセクションに分割されていますが、ユーザーがスクロールして表示される前に非表示にする必要があります。

無限スクロール プラグインを見てきましたが、すべての例はリモート コンテンツ専用のようです。基本的に同じものが必要ですが、1ページのコンテンツが必要です。私は 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;
}
4

2 に答える 2

0

高さを設定しなくてもスクロールします。最初のページの読み込み時にスクロール バーを作成する、div 内にクラス「コンテンツ」とコンテンツを持つ十分な数の div があることを確認してください。

css から float:left を削除してみてください。

于 2013-05-06T07:54:27.460 に答える
0

Set the height to "auto". I tried succesfully in your fiddle after putting some more content into the DIVs.

于 2013-05-06T06:51:58.470 に答える