javascript jQuery滚动显示隐藏内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10036610/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery scroll show hidden content
提问by Hymantheripper
How do I make it so that by default, 6 div elements are shown on the page, and when a user scrolls to the bottom of the page, six more are loaded?
我如何使它在默认情况下在页面上显示 6 个 div 元素，并且当用户滚动到页面底部时，会加载另外六个？
If you see this example, it has multiple divs. I want only 6 of them to be show initially, and each time the user reaches the bottom of the page, I want six more to be loaded, until you 'run out' of divs.
如果你看到这个例子，它有多个 div。我希望最初只显示其中的 6 个，每次用户到达页面底部时，我希望再加载 6 个，直到您“用完”div。
So far I have tried experimenting with jQuery infinite scroll plugins, but they are not applicable in my case, as in fact the number of elements I have is very finite!
到目前为止，我已经尝试过使用 jQuery 无限滚动插件进行试验，但它们不适用于我的情况，因为实际上我拥有的元素数量非常有限！
How can this be accomplished using jQuery? Thanks in advance!
这如何使用 jQuery 来完成？提前致谢！
EDIT
编辑
I believe one could set the rest of the divs to hidden (apart from the first 6), and trigger a function that loads six more when the bottom of the page is reached.
我相信可以将其余的 div 设置为隐藏（除了前 6 个），并触发一个函数，在到达页面底部时再加载 6 个。
回答by trickyzter
I have created a very quick example, it's not optimised by does the job:
我创建了一个非常快速的示例，它没有通过工作进行优化：
回答by Ryan P
You should be able to use something like the following:
您应该能够使用以下内容：
jQuery( window ).scroll( function( ) {
var loadHeight = jQuery( document ).height( ) - jQuery( window ).height( );
if( haveDivsToLoad && jQuery( window ).scrollTop( ) >= loadHeight ) {
// fire your load function here
}
} );
You might need to play with loadHeightto make it work to your satisfaction.
您可能需要使用loadHeight它才能使其满意。
EDIT: I added haveDivsToLoadto the check. You should make this a global (or closure) variable and set it to trueor falsedepending on whether there are more divs to load.
编辑：我添加haveDivsToLoad到支票。您应该将其设为全局（或闭包）变量并将其设置为true或false取决于是否有更多div要加载的 s。
回答by Travis J
Lets assume you have an array of divs each initialized with the document.createElement("div")or similar. Lets assume you have a large array of them.
假设您有一个 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++]);
}
}
});
回答by Hymantheripper
After a bit of experimenting, I found the perfect answer:
经过一番试验，我找到了完美的答案：
