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
$ 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>
</div>

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:

$('#container').simpleIscroll({
  content: '#myView',
  paging: '#paging',
  next: 'a.next',
  loading: '#loading'
});

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

$('#container').simpleIscroll({
  margin: 10
});

7. Event handlers.

$('#container').simpleIscroll({
  // 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.