无限滚动jquery插件

我正在尝试在ColdFusion开发的网站上设置无限滚动，我是javascript和jquery的新手，所以我有一些问题，包括我的头。 为了使用无限滚动插件，我需要在我的网站上进行分页吗？还是有办法用它来做到这一点？

Answer 1

你不需要这个无限的滚动插件。 要检测滚动到达页面的结尾，用jQuery你可以做

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

在JsFiddle上演示

Answer 2

我正在使用侯赛因的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 。

Answer 3

我在这里build立了侯赛因的小例子来构build一个jQuery小部件。 它支持localStorage临时保存附加结果，并且暂停function可以停止每隔一段时间的附加操作，需要点击才能继续。

试一试：

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

Answer 4

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

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

这里$（document）.height（） – >是整个文档的高度。在大多数情况下，这等于当前文档的元素。

$（window）.height（） – >是窗口的高度（浏览器）意味着你在浏览器上看到的高度。

$（window）.scrollTop（） – > Element.scrollTop属性获取或设置元素内容向上滚动的像素数。 元素的scrollTop是元素顶部到最顶层可见内容距离的度量。 当元素内容不生成垂直滚动条时，则其scrollTop值默认为0。

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

用$（window）.height（）添加$（window）.scrollTop（）现在检查结果是否等于你的文档高度。 如果它相等意味着你达到了最后。我们也加了100，因为我想检查之前从文件的底部100像素（注意<=在条件）

如果我错了，请纠正我

Answer 5

如果你有一些参考，就像你的页脚，你可以使用这个代码，可以说你有一个页脚的div＃id：

 function element_in_scroll(elem) { var docViewTop = $(window).scrollTop(); var docViewBottom = docViewTop + $(window).height(); var elemTop = $(elem).offset().top; var elemBottom = elemTop + $(elem).height(); return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); } $(document).scroll(function(e){ if (element_in_scroll("#footer")) { //Here you must do what you need to achieve the infinite scroll effect... }; }); 

另外，如果你想更多的信息结帐这如何创build无限滚动jquery手册http://dumpk.com/2013/06/02/how-to-create-infinite-scroll-with-ajax-on-jquery/

Answer 6

我用侯赛因和尼克的想法写了这个函数，但我希望它使用callback的承诺 。 我也希望无限滚动区域是一个固定的div，而不是只有窗口，如果div被发送到选项对象。 在我的第二个链接下面有一个例子。 如果你想支持旧的浏览器，我build议使用Q这样的承诺库。 cb方法可能会也可能不会是一个承诺，它会一直工作。

它是这样使用的：

HTML

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

JS

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

如果您希望Feed暂时停止，则可以在cb方法中返回false。 如果您已经点击了Feed，则很有用。 可以通过调用infiniteScroll的返回对象方法“setShouldLoad”并传入true和example来与上面的代码一起再次启动。

 infScroll.setShouldLoad(true); 

无限滚动的function是这样的

 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饲料作为滚动饲料的例子

Answer 7

如果你有一个可滚动的元素，就像一个带有滚动溢出的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 */ } }); }); 

Answer 8

我有同样的问题，但没有find适合我的需要的插件。 所以我写了下面的代码。 此代码通过使用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="jquery-3.2.1.min.js"></script> <div id="infiniteContent"></div>