Jquery infinite scroll plugin

Question

I am trying to set up infinite scrolling on a site that I am developing using Coldfusion, I am new to javascript and jquery, so I am having some problems wrapping it all up. Do I need to have pagination on my site in order to use the infinite scroll plugin, or is there a way to do this without it?

Answer 1

You do not need an endless scroll plugin for this. To determine when scrolling reaches the end of the page, using jQuery you can do

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

JsFiddle Demo

Answer 2

I am using a Hussein response with AJAX requests. I changed the code to run from 300px instead of 10px, but it started causing multiplication of my additions before the AJAX request was completed, since the scroll call is triggered much more often in the 300px range than the 10px range.

To fix this, I added a trigger that will be flipped when AJAX loads successfully. My code looks something like this:

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

then in the AJAX answer I set scrollLoad to true .

Answer 3

I built a small example on top of Hussein here to create a jQuery widget. It supports localStorage to temporarily store added results and has a pause function to stop adding every so often, requiring the click to continue.

Try:

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

Answer 4

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

Someone asked for an explanation, so here is an explanation

here $ (document) .height () → - the height of the entire document. In most cases this is equal to the element of the current document.

$ (window) .height () -> window height (browser) means the height of what you see in the browser.

$ (window) .scrollTop () → The Element.scrollTop property gets or sets the number of pixels that the content of the element scrolls up. The scrollTop element is a measure of the distance from the vertex of an element to its highest visible content. If the content of an element does not generate a vertical scrollbar, then its scrollTop defaults to 0.

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

add $ (window) .scrollTop () with $ (window) .height () now check if the result is equal to your height of your document or not. if it is equal, then you have reached the end. We add 100 too, because I want to check up to 100 pixels from the bottom of the document (note <= in condition)

please correct me if i am wrong

Answer 5

If you have a link, for example, your footer, you can use this code, let's say you have a footer with id #footer:

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

Also, if you want more information about this, how to create endless scrolling in the jquery manual http://dumpk.com/2013/06/02/how-to-create-infinite-scroll-with-ajax-on-jquery/

Answer 6

I wrote this function using the ideas of Hussein and Nick, but I wanted it to use promises for a callback. I also wanted the infinite scroll area to be on a fixed div, and not just on the window if the div was sent to the options object. Below is an example of this in my second link below. I suggest using a promise library like Q if you want to support older browsers. The cb method may or may not be a promise, and it will work independently.

Used like this:

HTML

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

Js

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

If you want the feed to pause temporarily, you can return false in the cb method. Useful if you are at the end of the feed. It can be started again by calling the infinScroll method "setShouldLoad" and returning true and example to execute the code above.

 infScroll.setShouldLoad(true); 

Endless scroll function is

 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 example feed with a window as a scroller

2 example feed from a feed as a scroller

Answer 7

If you have a scrollable element, such as a div with a scroll overflow, but without a scrollable document / page, you can do this.

  $(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

I had the same problem but could not find a suitable plugin for my need. so I wrote the following code. this code adds a template to an element, fetching data using ajax and pagination. to detect when the user scrolls to the bottom of the div, I used this condition:

 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>