jQuery滚动显示隐藏内容答案

【问题标题】：jQuery scroll show hidden contentjQuery滚动显示隐藏内容
【发布时间】：2012-04-05 21:59:25
【问题描述】：

如何让页面上默认显示 6 个 div 元素，当用户滚动到页面底部时，又加载了 6 个？

如果你看到这个example，它有多个 div。我希望最初只显示其中的 6 个，并且每次用户到达页面底部时，我希望再加载 6 个，直到您“用完” div。

到目前为止，我已经尝试过使用 jQuery 无限滚动插件，但它们不适用于我的情况，因为实际上我拥有的元素数量非常有限！

如何使用 jQuery 来实现？提前致谢！

编辑

我相信可以将其余的 div 设置为隐藏（除了前 6 个），并触发一个函数，在到达页面底部时再加载 6 个。

【问题讨论】：

你应该这样做。当用户到达底部时触发一个事件，并在此事件上加载下一个 div。

标签： javascript jquery html css scroll

【解决方案1】：

我创建了一个非常简单的示例，它没有根据工作进行优化：

http://jsfiddle.net/gRzPF/2/

【讨论】：

【解决方案2】：

你应该能够使用类似以下的东西：

jQuery( window ).scroll( function( ) {
    var loadHeight = jQuery( document ).height( ) - jQuery( window ).height( );
    if( haveDivsToLoad && jQuery( window ).scrollTop( ) >= loadHeight ) {
        // fire your load function here
    }
} );

您可能需要与loadHeight 一起玩才能使其满意。

编辑：我在支票中添加了haveDivsToLoad。您应该将其设为全局（或闭包）变量并将其设置为 true 或 false，具体取决于是否有更多的 divs 要加载。

【讨论】：

【解决方案3】：

假设您有一个 div 数组，每个 div 都使用 document.createElement("div") 或类似名称进行初始化。让我们假设你有一个很大的数组。

var myArrayOfDivs = [];//see above
var DivsAdded = 6;//as stated, 6 were already added - index 6 is the 7th element
$(window).scroll(function () {
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {
        for(int i = 0; i < 6; i++){
         if( myArrayOfDivs.length < DivsAdded ) break;
         $("#elementToAppendIn").append(myArrayOfDivs[DivsAdded++]);
        }
    }
});

【讨论】：

【解决方案4】：

经过一番试验，我找到了完美的答案：

http://jsfiddle.net/jackdent/gRzPF/12/

【讨论】：