无限滚动 jquery 插件

我正在尝试建立一个无限滚动的网站，我正在开发与 ColdFusion，我是新的 javascript 和 jquery，所以我有一些问题缠绕我的头这一切。为了使用无限滚动插件，我是否需要在我的站点上使用分页，或者有没有不使用它的方法？

57431 次浏览
小开
最佳答案

您不需要为此无限滚动插件。要检测滚动到达页面末尾的时间，可以使用 jQuery

$(window).scroll(function () {
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
//Add something at the end of the page
}
});

在 JsFiddle 上演示

小开

我在 Hussein 的小示例之上构建了一个 jQuery 小部件。它支持 localStorage 临时保存附加的结果，并且具有暂停功能，可以经常停止附加，需要点击才能继续。

试试看:

Http://www.hawkee.com/snippet/9445/

小开

我使用侯赛因的答案与 AJAX 请求。我修改了代码以300px 而不是10px 触发，但是它在 AJAX 请求完成之前开始导致我的追加数量增加，因为滚动调用在300px 范围内触发的频率比在10px 范围内要高得多。

为了解决这个问题，我添加了一个触发器，它将在成功的 AJAX 加载时被关闭。我的代码看起来更像这样:

var scrollLoad = true;


$(window).scroll(function () {
if (scrollLoad && $(window).scrollTop() >= $(document).height() - $(window).height() - 300) {
scrollLoad = false;
//Add something at the end of the page
}
});

然后在我的 AJAX 响应中，我将 scrollLoad设置为 true。

小开

我使用 Hussein 和 Nick 的想法编写了这个函数，但是我希望它使用 我保证作为回调函数。我还希望无限滚动区域在一个固定的 div 上，而不仅仅是在将 div 发送到 options 对象的窗口上。在我下面的第二个链接中有一个例子。如果您想支持较老的浏览器，我建议使用像 问:这样的承诺库。Cb 方法可能是一个承诺，也可能不是，无论如何它都会起作用。

它的用法是这样的:

Html

<div id="feed"></div>

JS

var infScroll = infiniteScroll({
cb: function () {
return doSomethingPossiblyAnAJAXPromise();
}
});

如果希望提要暂时停止，可以在 cb 方法中返回 false。如果您已经到达了提要的末尾，那么它将非常有用。可以通过调用无限滚动的返回对象方法“ setShouldLoad”并传入 true 和 example 来重新启动它，以便与上面的代码一起使用。

infScroll.setShouldLoad(true);

无限滚动的函数是这样的

function infiniteScroll (options) {
// these options can be overwritten by the sent in options
var defaultOptions = {
binder: $(window), // parent scrollable element
loadSpot: 300, //
feedContainer: $("#feed"), // container
cb: function () { },
}


options = $.extend(defaultOptions, options);
options.shouldLoad = true;


var returnedOptions = {
setShouldLoad: function (bool) { options.shouldLoad = bool; if(bool) { scrollHandler(); } },
};


function scrollHandler () {
var scrollTop = options.binder.scrollTop();
var height = options.binder[0].innerHeight || options.binder.height();
if (options.shouldLoad && scrollTop >= (options.binder[0].scrollHeight || $(document).height()) - height - options.loadSpot) {
options.shouldLoad = false;
if(typeof options.cb === "function") {
new Promise(function (resolve) {resolve();}).then(function() { return options.cb(); }).then(function (isNotFinished) {
if(typeof isNotFinished === "boolean") {
options.shouldLoad = isNotFinished;
}
});
}
}
}


options.binder.scroll(scrollHandler);


scrollHandler();


return returnedOptions;


}

1以窗口为滚动条的馈送实例

2以进料为滚轮的进料实例

小开 
$(function(){
$(window).scroll(function(){
if($(document).height()<=$(window).scrollTop()+$(window).height()+100){
alert('end of page');
}
});
});

有人要求解释，所以这里是解释

此处 $(文件)。Height ()—— > 是整个文档的高度。在大多数情况下，这等于当前文档的元素。

$(window) . height ()—— > 是窗口的高度(浏览器)表示你在浏览器上看到的任何东西的高度。

$(窗户)。ScrollTop ()—— > Element.scrollTop 属性获取或设置元素内容向上滚动的像素数。元素的 scrollTop 是对元素的顶部到其最顶部可见内容的距离的度量。如果元素内容不生成垂直滚动条，则其 scrollTop 值默认为0。

$(document).height()<=$(window).scrollTop()+$(window).height()+100

添加 $(窗口)。ScrollTop ()具有 $(窗口)。Height ()现在检查结果是否等于文档高度。如果它是相等的意味着你到达了结束。我们也增加了100，因为我想检查之前的100像素从底部的文档(注意 < = 条件)

如果我错了，请纠正我

小开

如果您有一个可滚动的元素，比如一个带有滚动溢出的 div，但是没有可滚动的文档/页面，您可以采用这种方式。

       $(function () {
var s = $(".your-scrollable-element");
var list = $("#your-table-list");


/* On element scroll */
s.scroll(function () {
/* The scroll top plus element height equals to table height */
if ((s.scrollTop() + s.height()) == list.height()) {
/* you code */
}
});
});
小开

我有同样的问题，但没有找到适合我的需要插件。所以我写了下面的代码。该代码通过使用 ajax 和分页获取数据，将模板附加到元素。 用于检测用户何时滚动到 div 的底部，我使用了以下条件:

var t = $("#infiniteContent").offset().top;
var h = $("#infiniteContent").height();
var ws = $(window).scrollTop();
var dh = $(document).height();
var wh = $(window).height();


if (dh - (wh + ws) < dh - (h + t)) {
//now you are at bottom of #infiniteContent element
}


$(document).ready(function(){
$.getJSON("https://jsonplaceholder.typicode.com/comments", { _page: 1, _limit:3 }, function (jsonre) {
appendTemplate(jsonre,1);
});
});


function appendTemplate(jsonre, pageNumber){
//instead of this code you can use a templating plugin like "Mustache"
for(var i =0; i<jsonre.length; i++){
$("#infiniteContent").append("<div class='item'><h2>"+jsonre[i].name+"</h2><p>"+jsonre[i].body+"</p></div>");
}


if (jsonre.length) {
$("#infiniteContent").attr("data-page", parseInt(pageNumber)+1);
$(window).on("scroll", initScroll);
    

//scroll event will not trigger if window size is greater than or equal to document size
var dh = $(document).height() , wh = $(window).height();
if(wh>=dh){
initScroll();
}
}
else {
$("#infiniteContent").attr("data-page", "");
}
}


function initScroll() {
var t = $("#infiniteContent").offset().top;
var h = $("#infiniteContent").height();
var ws = $(window).scrollTop();
var dh = $(document).height();
var wh = $(window).height();


if (dh - (wh + ws) < dh - (h + t)) {
$(window).off('scroll');
var p = $("#infiniteContent").attr("data-page");
if (p) {
$.getJSON("https://jsonplaceholder.typicode.com/comments", { _page: p, _limit:3 }, function (jsonre) {
appendTemplate(jsonre, p);
});
}
}
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="infiniteContent"></div>


提交答案