在div中使用jquery無限滾動僅顯示10個項目

Question

嗨，我發現了很多與此問題相關的示例，但是到目前為止，我發現它們與我的需求不符。在我的div上，我現在加載了從函數中檢索到的所有列表內容，我的目標是只能顯示6個項目，並繼續附加其他6個項目，直到使用jQuery中的無限滾動將列表用完為止。 這是我的列表在div中的外觀。

<div class="listOfAnything">
    <div class="all">apple</div>
    <div class="all">Banana</div>
    <div class="all">Guava</div>
    <div class="all">Pear</div>
    <div class="all">mango</div>
    <div class="all">Grapes</div>
    <div class="all">Avocado</div>
    <div class="all">Orange</div>
    <div class="all">Lemon</div>
    <div class="all">Nartjie</div>
    <div class="all">Granadilla</div>
    <div class="all">pawpaw</div>
    <div class="all">Ginger</div>
    <div class="all">Watermelon</div>
    <div class="all">potato</div>
    <div class="all">Sweet Potato</div>
    <div class="all">Peach</div>
</div>

我嘗試按照http://scrollmagic.io/examples/advanced/infinite_scrolling.html上的教程進行操作，但是我沒有運氣，因為我被卡在這里

function addBoxes (amount) {
    for (i=1; i<=amount; i++) {
        var randomColor = '#'+('00000'+  (Math.random()*0xFFFFFF<<0).toString(16)).slice(-6);
        $("<div></div>")
            .addClass("box1")
            .css("background-color", randomColor)
            .appendTo(".dynamicContent #content");
    }
    // "loading" done -> revert to normal state
    scene.update(); // make sure the scene gets the new   start position
    $("#loader").removeClass("active");
}

 // add some boxes to start with.
addBoxes(18);

因為我已經在div上有了內容。

Answer 1

添加了滾動功能

function addBoxes (amount) {
for (i=1; i<=amount; i++) {
    var randomColor = '#'+('00000'+  (Math.random()*0xFFFFFF<<0).toString(16)).slice(-6);
    $("<div></div>")
            .addClass("box1")
            .css("background-color", randomColor)
            .appendTo(".dynamicContent #content");
    }
    // "loading" done -> revert to normal state
    scene.update(); // make sure the scene gets the new   start position
    $("#loader").removeClass("active");
}

// add some boxes to start with.
addBoxes(6);

// do things on mousescroll
$(window).bind('mousewheel DOMMouseScroll', function(event)
{
    if (event.originalEvent.wheelDelta < 0 || event.originalEvent.detail > 0) {
        setTimeout(function(){
            addBoxes(6);
        }, 1000);
    }
});