https://github.com/metafizzy/infinite-scroll
📜 Automatically add next page
https://github.com/metafizzy/infinite-scroll
ajax javascript-plugin jquery-plugin ui
Last synced: 4 days ago
JSON representation
📜 Automatically add next page
- Host: GitHub
- URL: https://github.com/metafizzy/infinite-scroll
- Owner: metafizzy
- License: mit
- Created: 2010-05-04T17:28:57.000Z (almost 15 years ago)
- Default Branch: master
- Last Pushed: 2025-03-08T13:42:52.000Z (about 2 months ago)
- Last Synced: 2025-04-10T14:10:25.503Z (16 days ago)
- Topics: ajax, javascript-plugin, jquery-plugin, ui
- Language: HTML
- Homepage: https://infinite-scroll.com
- Size: 4.77 MB
- Stars: 7,455
- Watchers: 227
- Forks: 1,730
- Open Issues: 62
-
Metadata Files:
- Readme: README.md
- Contributing: .github/contributing.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# Infinite Scroll
_Automatically add next page_
See [infinite-scroll.com](https://infinite-scroll.com) for complete docs and demos.
## Install
### Download
- [infinite-scroll.pkgd.min.js](https://unpkg.com/infinite-scroll@5/dist/infinite-scroll.pkgd.min.js) minified, or
- [infinite-scroll.pkgd.js](https://unpkg.com/infinite-scroll@5/dist/infinite-scroll.pkgd.js) un-minified
### CDN
Link directly to Infinite Scroll files on [unpkg](https://unpkg.com).
``` html
```
### Package managers
npm: `npm install infinite-scroll`
Yarn: `yarn add infinite-scroll`
## License
Infinite Scroll v5 is licensed under the MIT License.
Whereas earlier versions of Infinite Scroll were previously dual licensed for commercial and closed-source usage, Infinite Scroll v5 licensing no longer has this distinction. You are free to use Infinite Scroll v5 in commercial and closed-source applications.
## Usage
Infinite Scroll works on a container element with its child item elements
``` html
...
...
...
...
```
### Options
``` js
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](https://v3.infinite-scroll.com/).
## Development
This package is developed with Node.js v14 and npm v6. Manage Node and npm version with [nvm](https://github.com/nvm-sh/nvm).
``` sh
nvm use
```
Install dependencies
``` sh
npm install
```
Lint
``` sh
npm run lint
```
Run tests
``` sh
npm test
```
---
By [Metafizzy 🌈🐻](https://metafizzy.co)