使用 AJAX (jQuery) 加载日期在 div 内无限滚动
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/6311269/
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
Infinite scrolling inside a div with AJAX (jQuery) loaded date
提问by Eax
I've been trying to figure this out over several questions here on SO, finding out the different parts and then assembling them, but now I'm giving up.
我一直试图通过 SO 上的几个问题来解决这个问题,找出不同的部分然后组装它们,但现在我放弃了。
What I'm trying do do:
我正在尝试做的事情:
The user is on a page, clicks a button and a list of content loads into a div using jQuerys .ajax. When he or she scrolls to the bottom of the div, load more content. As seen on Twitter, but this is inside a div.
用户在一个页面上,单击一个按钮,然后使用 jQuery .ajax 将内容列表加载到 div 中。当他或她滚动到 div 底部时,加载更多内容。正如在 Twitter 上看到的,但这是在一个 div 内。
I've seen examples on how to have infinite loading in scroll, but the problem is that those examples reload the entire page (it seems)
我已经看过有关如何在滚动中无限加载的示例,但问题是这些示例重新加载了整个页面(似乎)
Has anyone got any idea how I can accomplish this?
有没有人知道我如何做到这一点?
As said, I cannot accomplish this using normal means.
如上所述,我无法使用正常方式完成此操作。
The page is build as:
该页面构建为:
Page 1, has a div, empty until the user clicks a button.
第 1 页,有一个 div,在用户单击按钮之前为空。
Page 2 loads a lot of content. When the user clicks on the button on page 1, this is loaded into the div.
第 2 页加载了大量内容。当用户单击第 1 页上的按钮时,它会加载到 div 中。
When the user scrolls through the div (It has overflow set to auto) and ends at the bottom of the div it should load the next page or so to speak.
当用户滚动 div(它已将溢出设置为自动)并在 div 底部结束时,它应该加载下一页左右。
Thanks in advance! :)
提前致谢!:)
采纳答案by 472084
There are some plugins which do this for you quite well.
有一些插件可以很好地为您做到这一点。
http://www.webdeveloperjuice.com/2010/02/24/create-infinte-scroll-effect-using-jquery-with-demo/
http://www.webdeveloperjuice.com/2010/02/24/create-infinte-scroll-effect-using-jquery-with-demo/
http://www.beyondcoding.com/2009/01/15/release-jquery-plugin-endless-scroll/
http://www.beyondcoding.com/2009/01/15/release-jquery-plugin-endless-scroll/
EDIT: Some more up to date plugins:
编辑:一些最新的插件:
https://github.com/fredwu/jquery-endless-scroll
https://github.com/fredwu/jquery-endless-scroll
http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/
http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/
回答by BentOnCoding
Use the JQuery.load()method to grab some html content and then insert it into an html element.
使用JQuery.load()方法获取一些 html 内容,然后将其插入到 html 元素中。
回答by gray
If you're using Paul Irish's Infinite Scroll, you can just specify a binder as one of the arguments where you have implemented infinite scroll, just like this:
如果你使用的是 Paul Irish 的 Infinite Scroll,你可以指定一个活页夹作为你实现无限滚动的参数之一,就像这样:
$('.mydiv').infinitescroll({
binder: $(".name-of-div")
The binder is set to the document window by default, but if you specify it, you can have infinite scroll running simply inside one div on your page
默认情况下,活页夹设置为文档窗口,但如果您指定它,您可以在页面上的一个 div 内无限滚动