javascript - 在 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);
    }
});