blocks|key|995407|text|为此，您不需要无限滚动插件。要检测滚动何时到达页末，您可以使用jQuery执行以下操作|type|unstyled|depth|inlineStyleRanges|entityRanges|data|995408|$(window).scroll(function+()+{+
+++if+($(window).scrollTop()+>=+$(document).height()+-+$(window).height()+-+10)+{
++++++//Add+something+at+the+end+of+the+page
+++}
});|code-block|syntax|javascript|995409|JsFiddle上的Demo|offset|length|995410|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/hpwnbg8s/^0|0|0|A|4|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>You do not need infinite scroll plug-in for this. To detect when scroll reaches end of page, with jQuery you can do</p>

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

<p><a href="https://jsfiddle.net/hpwnbg8s/" rel="noreferrer">Demo</a> on JsFiddle</p>


blocks|key|995512|text|我在AJAX请求中使用了侯赛因的回答。我修改了代码以300px而不是10px触发，但它在AJAX请求完成之前就开始导致我的append成倍增加，因为scroll调用在300px范围内触发的频率比10px范围内的要高得多。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|995513|为了解决这个问题，我添加了一个触发器，该触发器将在成功加载AJAX时触发。我的代码看起来更像这样：|995514|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
++}
});|code-block|syntax|javascript|995515|然后在我的AJAX响应中，我将scrollLoad设置为true。|offset|length|style|CODE|995516|entityMap^0|0|0|0|F|A|S|4|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@$K|U|L|V|M|N]|$K|W|L|X|M|N]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|P|$]]

<p>I'm using Hussein's answer with AJAX requests. I modified the code to trigger at 300px instead of 10px, but it started causing my appends to multiply before the AJAX request was finished since the scroll call triggers much more frequently in a 300px range than a 10px range.</p>

<p>To fix this, I added a trigger that would be flipped on successful AJAX load. My code looks more like this:</p>

<pre><code>var scrollLoad = true;

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

<p>then in my AJAX response, I set <code>scrollLoad</code> to <code>true</code>.</p>


blocks|key|781144|text|我在侯赛因的小示例的基础上构建了一个jQuery小部件。它支持localStorage临时保存追加的结果，并具有暂停功能来停止每隔一段时间的追加，需要点击才能继续。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|781145|试一试：|781146|http://www.hawkee.com/snippet/9445/|offset|length|781147|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|Z|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@$F|R|G|S|1|T]]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|E]]]]

<p>I built on top of Hussein's little example here to make a jQuery widget.  It supports localStorage to temporarily save appended results and it has pause functionality to stop the appending every so often, requiring a click to continue.</p>

<p>Give it a try:</p>

<p><a href="http://www.hawkee.com/snippet/9445/">http://www.hawkee.com/snippet/9445/</a></p>


blocks|key|995671|text|$(function(){+
++++$(window).scroll(function(){
+++++++++++if($(document).height()<=$(window).scrollTop()%2B$(window).height()%2B100){
+++++++++++++++alert('end+of+page');
+++++++++++}
+++++++});
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|995672|有人要求解释，所以这是解释|unstyled|995673|这里$(+document.In+).height()-->在大多数情况下是整个文档的高度，它等于当前文档的元素。|995674|$(+window+).height()-->是窗口(浏览器)的高度，表示您在浏览器上看到的任何内容的高度。|995675|$(Window).scrollTop()-->+Element.scrollTop属性获取或设置元素内容向上滚动的像素数。元素的scrollTop是元素顶部到其最上面可见内容的距离的度量。如果元素内容不生成垂直滚动条，则其scrollTop值默认为0。|995676|$(document).height()<=$(window).scrollTop()%2B$(window).height()%2B100|995677|将$(window).scrollTop()与$(window).height()相加，现在检查结果是否等于您的文档高度。如果等于，则表示您在条件中到达的位置也增加了100，因为我想在文档底部的100像素之前进行检查(注意条件中的<=+)|995678|如果我说错了，请纠正我|995679|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|V|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|F|7|X|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|Y|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$B|C]]|$1|O|3|P|5|F|7|10|8|@]|9|@]|A|$]]|$1|Q|3|R|5|F|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|F|7|12|8|@]|9|@]|A|$]]]|T|$]]

<pre><code>$(function(){ 
    $(window).scroll(function(){
           if($(document).height()&lt;=$(window).scrollTop()+$(window).height()+100){
               alert('end of page');
           }
       });
});
</code></pre>

<p>Some one asked for explanation so here is the explanation</p>

<p>here $(document).height()-->is the height of the entire document.In most cases, this is equal to the  element of the current document.</p>

<p>$(window).height()-->is the height of the window (browser)  means height of  whatever you are seeing on browser.</p>

<p>$(window).scrollTop()-->The Element.scrollTop property gets or sets the number of pixels that the content of an element is scrolled upward. An element's scrollTop is a measurement of the distance of an element's top to its topmost visible content. When an element content does not generate a vertical scrollbar, then its scrollTop value defaults to 0.</p>

<pre><code>$(document).height()&lt;=$(window).scrollTop()+$(window).height()+100
</code></pre>

<p>add  $(window).scrollTop() with  $(window).height() now check whether the result is equal to your documnet height or not. if it is equal means you reached at the end.we are adding 100 too because i want to check before the 100 pixels from the bottom of document(note &lt;= in condition)</p>

<p>please correct me if i am wrong</p>


blocks|key|995735|text|我也有同样的问题，但是没有找到适合我需要的插件。所以我写了下面的代码。这段代码通过使用ajax和分页来获取数据，从而将模板附加到元素。为了检测用户何时滚动到div的底部，我使用了以下条件：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|995736|var+t+=+$("#infiniteContent").offset().top;
var+h+=+$("#infiniteContent").height();
var+ws+=+$(window).scrollTop();
var+dh+=+$(document).height();
var+wh+=+$(window).height();

if+(dh+-+(wh+%2B+ws)+<+dh+-+(h+%2B+t))+{
++++//now+you+are+at+bottom+of+#infiniteContent+element
}|code-block|syntax|javascript|995737|​|995738|$(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%2B%2B){
++	$("#infiniteContent").append("<div+class='item'><h2>"%2Bjsonre[i].name%2B"</h2><p>"%2Bjsonre[i].body%2B"</p></div>");
++}

++if+(jsonre.length)+{
++++$("#infiniteContent").attr("data-page",+parseInt(pageNumber)%2B1);
++++$(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+%2B+ws)+<+dh+-+(h+%2B+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);
++++++++++++});
++++++++}
++++}
}|995739|<script+src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div+id="infiniteContent"></div>|995740|995741|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Q|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|R|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|M|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>I had same problem but didn't find suitable plugin for my need. so I wrote following code. this code appends template to element by getting data with ajax and pagination.
for detecting when user scrolls to bottom of div I used this condition:</p>

<pre><code>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) &lt; dh - (h + t)) {
    //now you are at bottom of #infiniteContent element
}
</code></pre>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(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&lt;jsonre.length; i++){
  	$("#infiniteContent").append("&lt;div class='item'&gt;&lt;h2&gt;"+jsonre[i].name+"&lt;/h2&gt;&lt;p&gt;"+jsonre[i].body+"&lt;/p&gt;&lt;/div&gt;");
  }

  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&gt;=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) &lt; 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);
            });
        }
    }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery-3.2.1.min.js"&gt;&lt;/script&gt;
&lt;div id="infiniteContent"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|781444|text|如果你有一个可滚动的元素，比如一个带有scroll+overflow的div，但是没有可滚动的文档/页面，你可以这样做。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|781445|+++++++$(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()+%2B+s.height())+==+list.height())+{
++++++++++++++++++++/*+you+code+*/
++++++++++++++++}
++++++++++++});
++++++++});|code-block|syntax|javascript|781446|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>If you have a scrollable element, like a div with scroll overflow, but no scrollable document/page, you can take this way.</p>

<pre><code>       $(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 */
                }
            });
        });
</code></pre>


blocks|key|995591|text|我使用侯赛因和尼克的想法编写了这个函数，但我希望它使用promises进行回调。我还希望无限滚动区域位于固定的div上，而不仅仅是窗口(如果div被发送到options对象中)。在我下面的第二个链接中有一个例子。如果你想支持更老的浏览器，我建议使用像Q这样的promise库。cb方法可能是一个承诺，也可能不是一个承诺，它无论如何都会起作用。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|995592|它的用法如下：|995593|html|995594|<div+id="feed"></div>|code-block|syntax|javascript|995595|js|995596|var+infScroll+=+infiniteScroll({
++++cb:+function+()+{
++++++++return+doSomethingPossiblyAnAJAXPromise();+++++
++++}
});|995597|如果希望提要暂时停止，可以在cb方法中返回false。如果您已到达提要的末尾，则很有用。通过调用infiniteScroll的返回对象方法'setShouldLoad‘并传入true和example来配合上面的代码，可以再次启动它。|995598|infScroll.setShouldLoad(true);|995599|无限滚动的函数是这样的|995600|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+%7C%7C+options.binder.height();
++++++++if+(options.shouldLoad+&&+scrollTop+>=+(options.binder[0].scrollHeight+%7C%7C+$(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;

}|995601|1+feed+example+with+window+as+scroller|995602|2+feed+example+with+feed+as+scroller|995603|entityMap|0|LINK|mutability|MUTABLE|url|http://www.html5rocks.com/en/tutorials/es6/promises/|1|https://github.com/kriskowal/q|2|http://jsfiddle.net/johnsonjo4531/3e83kkn7/3/|3|http://jsfiddle.net/johnsonjo4531/gnffr7kg/2/^0|R|8|0|3H|1|1|0|0|0|0|0|0|0|0|0|0|0|12|2|0|0|10|3|0^^$0|@$1|2|3|4|5|6|7|1G|8|@]|9|@$A|1H|B|1I|1|1J]|$A|1K|B|1L|1|1M]]|C|$]]|$1|D|3|E|5|6|7|1N|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|1O|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|1P|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|1Q|8|@]|9|@]|C|$]]|$1|O|3|P|5|J|7|1R|8|@]|9|@]|C|$K|L]]|$1|Q|3|R|5|6|7|1S|8|@]|9|@]|C|$]]|$1|S|3|T|5|J|7|1T|8|@]|9|@]|C|$K|L]]|$1|U|3|V|5|6|7|1U|8|@]|9|@]|C|$]]|$1|W|3|X|5|J|7|1V|8|@]|9|@]|C|$K|L]]|$1|Y|3|Z|5|6|7|1W|8|@]|9|@$A|1X|B|1Y|1|1Z]]|C|$]]|$1|10|3|11|5|6|7|20|8|@]|9|@$A|21|B|22|1|23]]|C|$]]|$1|12|3|-4|5|6|7|24|8|@]|9|@]|C|$]]]|13|$14|$5|15|16|17|C|$18|19]]|1A|$5|15|16|17|C|$18|1B]]|1C|$5|15|16|17|C|$18|1D]]|1E|$5|15|16|17|C|$18|1F]]]]

<p>I wrote this function using Hussein and Nick's ideas, but I wanted it to use <a href="http://www.html5rocks.com/en/tutorials/es6/promises/" rel="nofollow">promises</a> for the callback.  I also wanted the infinite scrolling area to be on a fixed div and not just the window if the div is sent into the options object. There is an example of that in my second link below. I suggest using a promise library like <a href="https://github.com/kriskowal/q" rel="nofollow">Q</a> if you want to support older browsers.  The cb method may or may not be a promise and it will work regardless.</p>

<p>It is used like so:</p>

<p>html</p>

<pre><code>&lt;div id="feed"&gt;&lt;/div&gt;
</code></pre>

<p>js</p>

<pre><code>var infScroll = infiniteScroll({
    cb: function () {
        return doSomethingPossiblyAnAJAXPromise();     
    }
});
</code></pre>

<p>If you want the feed to temporarily stop you can return false in the cb method. Useful if you have hit the end of the feed. It can be be started again by calling the infiniteScroll's returned object method 'setShouldLoad' and passing in true and example to go along with the above code.</p>

<pre><code>infScroll.setShouldLoad(true);
</code></pre>

<p>The function for infinite scrolling is this</p>

<pre><code>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 &amp;&amp; scrollTop &gt;= (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;

}
</code></pre>

<p><a href="http://jsfiddle.net/johnsonjo4531/3e83kkn7/3/" rel="nofollow">1 feed example with window as scroller</a></p>

<p><a href="http://jsfiddle.net/johnsonjo4531/gnffr7kg/2/" rel="nofollow">2 feed example with feed as scroller</a></p>


<p>I am trying to set up infinite-scroll on a site I am developing with Coldfusion, I am new to javascript and jquery so I am having some issues wrapping my head around all of this. Do I need to have pagination on my site in order to use the infinite-scroll plugin, or is there a way to do it with out it?</p>


infinite-scroll jquery plugin

jQuery

我正在尝试在一个我正在用Coldfusion开发的网站上设置无限滚动，我对javascript和jquery是个新手，所以我对所有这些都有一些问题。为了使用无限滚动插件，我需要在我的站点上进行分页吗?或者有什么方法可以不使用它吗？

问无限滚动jquery插件
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无限滚动jquery插件EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无限滚动jquery插件
EN