Infinite Scroll View Using jQuery XMLHttpRequest - Simple iScroll

File Size: 13.9 KB
Views Total: 1502
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Infinite Scroll View Using jQuery XMLHttpRequest - Simple iScroll

Simple iScroll is a tiny jQuery infinite scroll plugin which dynamically loads and appends more contents when you scroll to the boundary of a container or the whole document.

How to use it:

1. Install & download the Simple iScroll.

$ npm install @kanety/jquery-simple-iscroll --save

2. To use this plugin, include the minified version of the Simple iScroll plugin after jQuery.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery-simple-iscroll.js"></script>

3. Create group of links pointing to external files to be loaded into the infinite scroll view.

<div id="paging" style="display: none;">
  <a class="prev">prev</a>
  <a href="index.1.html">index.1.html</a>
  <a href="index.2.html">index.2.html</a>
  <a href="index.3.html">index.3.html</a>
  <a href="index.2.html" class="next">next</a>

4. Create a loading indicator which will appear when loading more content.

<div id="loading" style="display: none;">Loading...</div>

5. Initialize the plugin on the target container and override the default settings as follows:

  content: '#myView',
  paging: '#paging',
  next: '',
  loading: '#loading'

6. Specify the margin size at which point to trigger the infinite scroll. Default: 0.

  margin: 10

7. Event handlers.

  // options here
}).on('load:start', function(e, href) {
  // on start
}).on('load:end', function(e, href) {
  // on end
}).on('load:success', function(e, $content, $paging) {
  // on success
}).on('load:failure', function(e, nextHref, xhr, status, error) {
  // on failure

This awesome jQuery plugin is developed by kanety. For more Advanced Usages, please check the demo page or visit the official website.