Giter Site home page Giter Site logo

infinite-scroll's Introduction

Infinite Scroll

Automatically add next page

See infinite-scroll.com for complete docs and demos.

Install

Download

CDN

Link directly to Infinite Scroll files on unpkg.

<script src="https://unpkg.com/infinite-scroll@4/dist/infinite-scroll.pkgd.min.js"></script>
<!-- or -->
<script src="https://unpkg.com/infinite-scroll@4/dist/infinite-scroll.pkgd.js"></script>

Package managers

npm: npm install infinite-scroll

Yarn: yarn add infinite-scroll

License

Commercial license

If you want to use Infinite Scroll to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. Purchase an Infinite Scroll Commercial License at infinite-scroll.com

Open source license

If you are creating an open source application under a license compatible with the GNU GPL license v3, you may use Infinite Scroll under the terms of the GPLv3.

Read more about Infinite Scroll's license.

Usage

Infinite Scroll works on a container element with its child item elements

<div class="container">
  <article class="post">...</article>
  <article class="post">...</article>
  <article class="post">...</article>
  ...
</div>

Options

let infScroll = new InfiniteScroll( '.container', {
  // defaults listed

  path: undefined,
  // REQUIRED. Determines the URL for the next page
  // Set to selector string to use the href of the next page's link
  // path: '.pagination__next'
  // Or set with {{#}} in place of the page number in the url
  // path: '/blog/page/{{#}}'
  // or set with function
  // path: function() {
  //   return return '/articles/P' + ( ( this.loadCount + 1 ) * 10 );
  // }

  append: undefined,
  // REQUIRED for appending content
  // Appends selected elements from loaded page to the container

  checkLastPage: true,
  // Checks if page has path selector element
  // Set to string if path is not set as selector string:
  //   checkLastPage: '.pagination__next'

  prefill: false,
  // Loads and appends pages on intialization until scroll requirement is met.

  responseBody: 'text',
  // Sets the method used on the response.
  // Set to 'json' to load JSON.

  domParseResponse: true,
  // enables parsing response body into a DOM
  // disable to load flat text

  fetchOptions: undefined,
  // sets custom settings for the fetch() request
  // for setting headers, cors, or POST method
  // can be set to an object, or a function that returns an object

  outlayer: false,
  // Integrates Masonry, Isotope or Packery
  // Appended items will be added to the layout

  scrollThreshold: 400,
  // Sets the distance between the viewport to scroll area
  // for scrollThreshold event to be triggered.

  elementScroll: false,
  // Sets scroller to an element for overflow element scrolling

  loadOnScroll: true,
  // Loads next page when scroll crosses over scrollThreshold

  history: 'replace',
  // Changes the browser history and URL.
  // Set to 'push' to use history.pushState()
  //    to create new history entries for each page change.

  historyTitle: true,
  // Updates the window title. Requires history enabled.

  hideNav: undefined,
  // Hides navigation element

  status: undefined,
  // Displays status elements indicating state of page loading:
  // .infinite-scroll-request, .infinite-scroll-load, .infinite-scroll-error
  // status: '.page-load-status'

  button: undefined,
  // Enables a button to load pages on click
  // button: '.load-next-button'

  onInit: undefined,
  // called on initialization
  // useful for binding events on init
  // onInit: function() {
  //   this.on( 'append', function() {...})
  // }

  debug: false,
  // Logs events and state changes to the console.
})

Browser support

Infinite Scroll v4 supports Chrome 60+, Edge 79+, Firefox 55+, Safari 11+.

For IE10 and Android 4 support, try Infinite Scroll v3.

Development

This package is developed with Node.js v14 and npm v6. Manage Node and npm version with nvm.

nvm use

Install dependencies

npm install

Lint

npm run lint

Run tests

npm test

By Metafizzy 🌈🐻

infinite-scroll's People

Contributors

67726e avatar alexisabril avatar alexsegura avatar anthonydisanti avatar arief-hidayat avatar benbalter avatar defeated avatar desandro avatar ey-intuitive avatar fliespl avatar gsomoza avatar icetee avatar jacopotarantino avatar jvanasco avatar kyle-mccarthy avatar lentinj avatar lukeshumard avatar mgeraci avatar misiek08 avatar niftylettuce avatar nvartolomei avatar paladisco avatar paulirish avatar pawelstroinski avatar reggi avatar ryleyb avatar samcleaver avatar sparanoid avatar szepeviktor avatar vdeggial avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

infinite-scroll's Issues

IE specific show()/hide() instead of fadeTo()

In IE7 (and under) the "loading next set of posts" / "you've reached the end of the internet" text can appear blurred/distorted since the wrapper div is having opacity set via fadeTo() without a background color.

A simple fix is to add:

background-color: #(any color);

However, if you had a pattern/image as a background then visually it would look bad as you would have a solid block of color over said pattern/image.

In the past, I get around this by doing a IE-only show()/hide() instead of fadeTo to avoid this problem:

if(!$.browser.msie) $('#element').fadeTo(0, 0); else $('element').hide(); // Or vice-versa for showing/fading in

Debug errors in IE

The $.infinitescroll options and properties read-only object at the very bottom of the source code in version 1.5.101116 ends with a superfluous comma on the "currDOMChunk : null," line that will break in IE. Removing the comma will fix that issue.

Best way to handle iPhone

I received an issue ticket regarding infinite scroll and my masonry plugin working on the iPhone. Taking a look at infinite-scroll.com and aurgasm.us, looks like Infinite Scroll is disabled when viewing on an iPhone. I wasn't able to suss out how you're disabling Infinite Scroll for mobile devices, care to share?

Typo on line 139

It looks like there is a typo on line 139, you make use of a variable destpaurl which doesn't exist, and hasn't been declared as anything either, additionally I am getting an error on that line because path doesn't have a method called join.

It is causing many issues and I can't find a way around it.

Length undefined, line 81

In both the minified and full versions of the code, I'm getting an error in my console preventing the plugin from working. Here's the error I see on line 81 of the full version:

Uncaught TypeError: Cannot read property 'length' of undefined

Any thoughts on why this might be?

Thanks in advance!

Interfering scripts

I'm working on a Tumblr theme that utilizes your infinite-scroll, David DeSandro's Masonry, and a script to format Youtube videos. I've gotten both Masonry and infinite-scroll to play nice with each other, but something's odd with the loaded posts. The audio post player doesn't work and the Youtube script doesn't work for the video posts. Is there any way I can get all three scripts to work with each other?

Theme: http://glw.tumblr.com

Youtube script: http://static.tumblr.com/imovwvl/RFplh5btp/youtube.js

<script type="text/javascript"> $(window).load(function() { var $wall = $('#posts'); $wall.masonry({ itemSelector: '.post' }); ``` $wall.infinitescroll({ navSelector : '#pag', nextSelector : '#pag .right a', itemSelector : '.post', debug : false }, function( newElement ) { setTimeout(function() { $wall.masonry({ appendedContent: $( newElement ) }); }, 1000); } ); }); ``` </script>

jQuery 1.6.1 "undefined" errors

jQuery 1.6.1 is throwing "undefined" errors when the parent element of itemSelector is missing either an ID or class. The following example uses just an ID on the parent element, and throws an "$(element).attr("class") is undefined" error. A similar error is thrown if you use just a class.

This example previously worked fine on jQuery 1.4.4. The error is being caused due to the way jQuery 1.6.x is reporting errors in the .attr() method. "As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set." http://api.jquery.it/attr/

The way to fix the issue (in the user's code) is to ensure the parent element has both an ID and class assigned to it. I figured this was worth reporting, in case a catch can be added into the InfiniteScroll JS code.

JavaScript:

$('ul#thumbnails').infinitescroll({
  navSelector  : "#results_nav",
  nextSelector : "#results_nav a.next_page",
  itemSelector : "ul#thumbnails li.thumbnail"
});

Failing HTML:

<ul id="thumbnails">...</ul>

Working HTML (the actual values of ID and class are not important, just that they are both present):

<ul id="thumbnails" class="infinite_scrollable">...</ul>

Hope this helps.

last #infscr-loading not fading out.

first, thank you for this great plug-in.

i'm having trouble with the #infscr-loading div. when the posts reach the end, the div box won't fade-out. only the donetext fades out. but the div box stays there. fixed on the page.

how can I fix this?

thank you again.

isDone callback method?

Is there a way, to tie in a callback method to execute at the end of the line? I believe we have access to a callback on every load complete, but perhaps not on isDone.

Something similar is in use at this site, and shows a footer only when the footer can be reached.

http://www.dynamit.us/

Option to control the tag name of the loading bar

Currently the tag name for the loading bar is a

and it would be nice to be able to alter this depending on your project as its currently putting the
inside a
    which is non standard and causes issues so I now have to edit all my code to use
    s instead.

    Option could be something like statusTagName default 'div', to be honest it could just detect if its in a list element and make it a list item rather than a div.

New site

If infinite-scroll.com were to get a makeover, what sort of things would you want to see? Demos, examples, more in-depth API documentation, etc. What would you find helpful or useful?

Pause method, resume method?

So far it looks like we have a pause method with options to pause, resume and toggle. Would it make perhaps more sense to have a dedicated method for resuming? passing ('pause','pause') seems a bit redundant, and some might argue that conventionally pausing only encompasses the periodic stopping. I may have missed a discussion around this.

Using DIV container instead of window won't work?

Noticed that if you use the "container" attribute (did this replace localMode?), infinite scroll won't work. Auto-scroll in the DIVs in the examples bundled with the project don't seem to work either. Could this be an issue on line 270, i.e.

$(window)
.bind('scroll.infscr', infscrSetup)
.trigger('scroll.infscr'); // trigger the event, in case it's a short page

which binds only to the window, no matter what is specified as container?

Raising the Dead

considering a revive method, since sometimes you want to kill the thing immediately, and pick up where you left off based on interactions.... for us it happens that if you have a form in your footer, and you have infinite scroll going on, you can't type in the form because the page keeps growing. thus the revive would reverse the destroy method, and could be fired on blur. the method so far as i can tell only involves the following:

this.options.isDestroyed = this.options.isDone = this.options.isDuringAjax = false;

Triggering rewritten

I've been thinking more and more how awesome it would be to rewrite triggering of events in the plugin. Right now, triggering the plugin to pause would be written as...
$(window).trigger('pause.infscr'); or $(window).trigger('pause.infscr', ['pause']);

What I'd like to do is modify this to...
$('#selector').infinitescroll('pause');

Aside from just being much more intuitive to write, maybe this could free up some of the bindings. Whenever I look at the code I can't help but think how sloppy that bit is.

My only concern is passing in arguments to this. This could be done with the . character, so the syntax would be...
$('#your-selector').infinitescroll('method.argument');.

Thoughts, ideas, feedback, etc. appreciated!

How to force loading of next page content when no scroll bar onload

I have a page that loads page 1 content but when the viewport is larger than the content, no scrollbar exists and there's no way to get to page 2 content (non-JS navigation already hidden)... Is there an option to force page 1..n to be loaded until a scrollbar comes into play, making it possible to get to subsequent page content using infinite-scroll? If the viewport is small and a scrollbar is there on initial load, getting to content is as expected.

WordPress plugin not loading more than to page 2

Great plugin, but I have a problem:

When I use the infinite scroll on my WordPress theme, it only loads until page 2. Even though there are more posts on page 3 and 4 etc...

Without the plugin, there are navigation links to all the pages and they work, but infinite scroll seems to ignore the links after page 2.

My theme uses the original Twenty-Ten loop.php.

Thankful for your help.

Manually trigger `retrieve.infscr`

I got a request for a user that wants to trigger loading a new page with a button. I'm curious as to the best way to trigger the retrieve.infscr event for a container.

Add support to widget for callback

The jquery plugin supports adding a callback on construction, for controlling how the newly retrieved elements are processed.
With the callback, you can (for instance), prepend elements instead of append.

Please add support for that callback to the widget.

A callback must be a js function (either lambda or regular function).

wordpress plugin and sites with both http and https access

When a site is accessible via both http and https, the plugin still pulls in the JS via the http URI, even if you access the site via https. This gives mixed-ssl errors. It would be good if the JS linking would use the same scheme to pull JS as the main access uses.

Making this work strictly for AJAX / JSON objects

Right now the plugin loads an entirely new page and strips everything except what it needs for the new content. This adds additional hits to the database (for unrelated content elsewhere on the page) when really all we are trying to load is specific objects as JSON or partials from the webserver.

It would be nice to have an option to supply an AJAX route and get the data directly from there instead of the current methodology. This could even be it's own plugin since this one seems to be more for those who can't control what is sent from the backend.

Any thoughts or plans to do something like this in the future? I guarantee a lot of people would use this feature. Thanks!!

Permalink to any given state

from infinite-scroll.com...
There is no permalink to a given state of the page.

i worked on the "multiple instances" feature of this plugin with the idea that it would mainly be used for ajax-based sites with more than one section that would utilize this plugin. that being said, i would like to see some sort of "deep linking" option in the api where going to "/#/page/2" will automatically go to the second page. since there are about a billion ways that people would be doing this, anyone have any ideas on the best method for us to implement this idea?

reloading other javascript

I'm using infinite scroll together with other simpler jquery scripts i wrote myself., but every time the next set of content is loaded, the other scripts simply don't work. What is the best way to reload the other scripts along with the next content. Here is my code so far:

<script type="text/javascript" > $(window).load(function(){ $(".meta").hide(); $(".post_wrapper").mouseenter(function () { $(".meta", this).slideDown("slow"); }); $(".post_wrapper").mouseleave(function () { $(".meta", this).slideUp("slow"); }); $('#posts').infinitescroll({ navSelector : '#footer', // selector for the paged navigation nextSelector : '#footer a.new', // selector for the NEXT link (to page 2) contentSelector : "#posts", itemSelector : '.post', // selector for all items you'll retrieve loadingImg : 'http://dl.dropbox.com/u/10308294/vq/box.gif', loadingText : "Loading", donetext : "End", bufferPx : 2500, debug: false, errorCallback: function() { $('#infscr-loading').animate({opacity: .8},2000).fadeOut('normal'); } }); }); </script>

Thanks in advance for anyone who can help!

Scroll bar jumping especially in FF

If you've noticed, when you grab the scroll bar on the right hand side of the browser and scroll down (by dragging the scroll bar, not clicking the "down" arrow) the bar tends to jump all over the place, especially in Firefox. A client of mine didn't like this so I looked for something like a "onScrollStop" event.

I came across this website:
http://james.padolsey.com/javascript/special-scroll-events-for-jquery/

I pasted that code into my project and then changed these lines to say "scrollstop" instead of "scroll":

// bind scroll handler to element (if its a local scroll) or window
$(opts.localMode ? this : window)
.bind('scrollstop.infscr', infscrSetup)
.trigger('scrollstop.infscr'); // trigger the event, in case it's a short page

Thoughts? Now if I scroll to the bottom of the page, I set the latency to 1000 and the user has time to release his drag-and-drop which is much more smooth. The client was happy with my solution

Is this a fix for iPhone/iPad scroll problems?

The iPhone and iPad don't seem to trigger the auto-scroll event unless you zoom in a bit. A temporary solution seems to add the correct zoom level via a meta tag in the header like so:

< meta name="viewport" content="width=device-width, initial-scale=1" >

On the iPad, when you switch from portrait to landscape layout and then zoom out all the way, sometimes the event doesn't fire (regardless of this meta tag or not) - I haven't figured that one out yet, though.

Behavior Extensibility

In Infinite Scroll 2.0, you'll be able to create your own behaviors for the plugin. If a behavior is not defined, it will default to binding to our custom scroll event as you've come to know and love. This should make it easier to package common use-cases of the plugin such as "Twitter-style"/ Manual trigger, Masonry integration, and scrolling locally (ie. localMode in pre-2.0).

New test page for repo

Considering how many new features the plugin has, we need a new test page. Something with a fixed element where you can trigger all public methods (namely pausing, filtering, errors), the ability to change props and opts on the fly, plus anything else you would want.

Also needs to be a standalone page like the current test/test.html file and call on the unminified version of the script.

Who's up to it?

Multiple instances really working?

What exactly must be done to set up two instances on the same page? It seems that, with the current version, an instance that receives nothing from the server unbinds the full scroll.infscr from the window object for all instances.

Seems like what would be needed is something like .bind("ajaxError."+opts.infid,...) instead of a .ajaxError(...), and then to trigger the infid-specific ajaxError when the current instance returns with an empty result set from the server.

Or am I misunderstanding something here?

Pausing

I'm working on a project that requires Infinite Scroll to "pause" (unbind itself from scrolling).

Here was my solution, which I'm still cleaning up a bit. Just wanted to see if anyone else would find it useful or if it's a bit too specific for global use. Since the check for pause is just an additional condition on

infscrSetup()
and the default value for
isPaused
is false, this shouldn't effect any other instances of the plugin.

http://pastebin.com/diff.php?i=xSfYUKPy

debug breaking IE (possibly)

An Isotope + Infinite Scroll user contacted me that he was having trouble resolving an issue with IE8 not properly pulling in new pages. It would keep on displaying the no-more pages message. Turns out his solution was removing debug: false from the Infinite Scroll options.

I haven't had a chance to test this in IE8, but I'm creating an issue just to remind myself.

Infinite scroll keeps repeating last records from database

My infinite scroll keeps repeating the last records from database when on end of amount of pages. Is this a bug or what am I doing wrong?

$('#list').infinitescroll({
navSelector : "div.pagination a#next:last",
nextSelector : "div.pagination a#next:last",
itemSelector : "#list #assortiment",
debug : false,
loadingText : "loading...",
animate : true,
extraScrollPx: 100,
bufferPx : 40,
localMode : true
});

The id #assortiment is a table where the infinite scroll adds the rows to, this works but when I'm out of pages the infinite scroll remembers my last page and keeps scrolling that page.

If I use the triggered infinite scroll all is correct. Seems to be something with the binding of my infinite scroll?

RegEx interfering with IP address

The RegEx used to find the number to increment the path (line 41 of infinitescroll.js) can interfere with your IP address when running a site locally. For example:

Making an XHR for page2.html, actually changes the requested address from:
192.xxx.x.xx:8080/page2.html
to
193.xxx.x.xx:8080/page2.html

which obviously doesn't exist so the "Loading more posts" message hangs until the request times out...

Screencasts of demos

Paul is going to record some demos for the new plugin. It's going to be brilliant.

Uncaught TypeError: Cannot read property 'debug' of undefined

I'm using version 2.0b2.110617 and I get this error in Chrome's Inspector:

Uncaught TypeError: Cannot read property 'debug' of undefined

which occurs at jquery.infinitescroll.js:156

Seems to happen on page which has no pagination (only one page of content).

URL structure for the nextSelector link

This isn't necessarily functionality-related, but a coworker of mine this morning had a difficult time getting the plugin working until he realized that the URL passed to the nextSelector has to pass a specific regex in order for the plugin to operate as intended. Specifically in the determinePath function, it's literally looking for a url that has some sort of number representing the next page (i.e., '/page/2/' or 'page=2'), as opposed to what he was doing which was the starting item # (like 'start=51').

I think if the documentation on the project website had just a sentence describing what the URL must contain in order for it to function properly, that'd clear things up a lot. And please ignore this ticket if that sentence is there already, but I couldn't find it after a quick read-through of http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/

next link url updated via jquery not being read in

Hi all

i have a quick question, im currently working on a project using the infinite-scroll jquery plugin and im having an issue.

i need to pass some information along with the page number in the nav link, so the first time i do this its ok the correct information is sent, and then within the callback function i updated the href with the new information. Basically im looking to send over the last record as im not always pulling through the same amoutn of records as im using a grid system which has various amounts of records each time.

now when i look in console to see the get command being sent, it seeems to just use the original values and not the updated values that are in the HTML after jquery has updated them. im not sure what im doing wrong or if i am doing something wrong, ive been on this for about 2 hours chainging things but no joy.

if anyone has any recommendations please could you let me know

Dan

Analytics in API?

I remember seeing this on the infinite scroll page (infinite-scroll.com) under "disadvantages"...

Analytics will not immediately capture the event, so custom configuration is required.

While it's fairly easy to set up Google Analytics in your callback function, I was wondering if this is something we could add to the API for easy integration. For example, you could add the option gaID where its value would be your Analytics ID, ie UA-12345-1. When the next set of items is loaded, the plugin could also fire _gaq.push(['_trackPageview', '/page/2']);.

This is just a spontaneous thought I had. Perhaps it's best to leave it as is for the callback function. Any feedback on the issue is appreciated.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.