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

在div中使用jquery无限滚动仅显示10个项目

1 个答案: