jQuery 无限滚动的替代方案
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4841585/
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
Alternatives to jQuery endless scrolling
提问by Hussein
Are there any alternatives to the jQuery endless scrolling plugin?
jQuery 无限滚动插件有什么替代品吗？
http://www.beyondcoding.com/2009/01/15/release-jquery-plugin-endless-scroll/
http://www.beyondcoding.com/2009/01/15/release-jquery-plugin-endless-scroll/
采纳答案by Gidon
For example the infinite scroll plugin
例如无限滚动插件
回答by Ergec
This should do the same trick without plugin
这应该在没有插件的情况下做同样的技巧
$(window).scroll(function () {
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 100) {
//Add something at the end of the page
}
});
EDIT Jan 15, 2014
编辑2014 年 1 月 15 日
According to @pere's comment, it's better to use the code below to avoid excessive amount of event firing.
根据@pere 的评论，最好使用下面的代码来避免过多的事件触发。
Inspired from this answer https://stackoverflow.com/a/13298018/153723
灵感来自这个答案https://stackoverflow.com/a/13298018/153723
var scrollListener = function () {
$(window).one("scroll", function () { //unbinds itself every time it fires
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 100) {
//Add something at the end of the page
}
setTimeout(scrollListener, 200); //rebinds itself after 200ms
});
};
$(document).ready(function () {
scrollListener();
});
回答by Alf Eaton
Combining Ergec's answer and Pere's comment:
结合 Ergec 的回答和 Pere 的评论：
function watchScrollPosition(callback, distance, interval) {
var $window = $(window),
$document = $(document);
var checkScrollPosition = function() {
var top = $document.height() - $window.height() - distance;
if ($window.scrollTop() >= top) {
callback();
}
};
setInterval(checkScrollPosition, interval);
}
distanceis the number of pixels from the bottom of the screen when the callback will fire.
distance是回调将触发时距屏幕底部的像素数。
intervalis how often the check will run (in milliseconds; 250-1000 is reasonable).
interval是检查运行的频率（以毫秒为单位；250-1000 是合理的）。
回答by Hawkee
I couldn't find one that did exactly what I wanted so I built one from scratch. It has a pause feature so it doesn't keep loading endlessly as you scroll. Sometimes somebody might want to see the page footer. It simply appends a "Show More" button to continue appending. I also incorporated localStorage so when a user clicks away they won't lose their place in the results.
我找不到一个完全符合我的要求的，所以我从头开始构建了一个。它具有暂停功能，因此在您滚动时不会无休止地加载。有时有人可能想要查看页脚。它只是附加一个“显示更多”按钮以继续附加。我还合并了 localStorage，因此当用户点击离开时，他们不会失去他们在结果中的位置。
http://www.hawkee.com/snippet/9445/
http://www.hawkee.com/snippet/9445/
It also has a callback function that can be called to manipulate the newly appended results.
它还有一个回调函数，可以调用它来操作新附加的结果。
回答by johnny 5
This should take care of a bug where the user reaches the bottom of the page before the event fires. I was seeing this in my project you should check prior to initializing the event if you're already at the bottom of the page.
这应该解决用户在事件触发之前到达页面底部的错误。我在我的项目中看到了这个，如果你已经在页面底部，你应该在初始化事件之前检查。
var scrollListener = function () {
executeScrollIfinBounds();
$(window).one("scroll", function () { //unbinds itself every time it fires
executeScrollIfinBounds();
setTimeout(scrollListener, 200); //rebinds itself after 200ms
});
};
$(document).ready(function () {
scrollListener();
});
function executeScrollIfinBounds()
{
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 100) {
//Add something at the end of the page
}
}
