无限滚动jquery插件

Question

我正在尝试在我正在使用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上的

Demo

Answer 2

我正在使用Hussein对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

我建立在侯赛因的小例子之上，制作一个jQuery小部件。它支持localStorage临时保存附加结果，它具有暂停功能，可以每隔一段时间停止附加，需要点击才能继续。

试一试：

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

Answer 4

如果您有一些引用，就像您的页脚一样，您可以使用此代码，假设您有一个名为#footer的页脚div：

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...
    };
});

此外，如果您想了解更多信息，请查看如何在jquery手册上创建无限滚动http://dumpk.com/2013/06/02/how-to-create-infinite-scroll-with-ajax-on-jquery/

Answer 5

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

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

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

$（window）.height（） - ＆gt;是窗口的高度（浏览器），表示您在浏览器上看到的任何高度。

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

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

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

如果我错了，请纠正我

Answer 6

我使用Hussein和Nick的想法编写了这个函数，但是我希望它使用promises来进行回调。我还希望无限滚动区域位于固定的div上，而不仅仅是将窗口发送到选项对象中的窗口。在我的第二个链接中有一个例子。如果您想支持旧浏览器，我建议使用像Q这样的承诺库。 cb方法可能是也可能不是承诺，无论如何都可以。

它的用法如下：

HTML

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

JS

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

如果您希望暂停Feed，则可以在cb方法中返回false。如果您点击了Feed的末尾，则非常有用。可以通过调用infiniteScroll的返回对象方法＆＃39; setShouldLoad＆＃39;来重新启动它。并传入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 feed example with window as scroller

2 feed example with feed as scroller

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

我遇到了同样的问题，但没有找到适合我需要的插件。所以我写了下面的代码。此代码通过使用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
}

＆＃13;

＆＃13;

$(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);
            });
        }
    }
}

＆＃13;

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="infiniteContent"></div>

＆＃13;

＆＃13;

＆＃13;