Infinite Scroll infinite-scroll.js

Turn any element into an infinite scrolling region with content that loads on demand.

Usage

Because of its dependency on a dataSource, you must initialize an infinitescroll() component via JavaScript:


$('#myInfiniteScroll').infinitescroll({
    //dataSource is required to append additional content
    dataSource: function(helpers, callback){
        //passing back more content
        callback({ content: '...' });
    }
});

Markup

Simply place class="infinitescroll" on an element of your choosing (preferably a div or span).


<div class="infinitescroll" id="myInfiniteScroll"></div>

Options

You can pass options via JavaScript at initialization.

Name type default description
dataSource function null Called whenever the user scrolls the specified percentage towards the bottom. Arguments passed include a helpers object and callback function. The helpers object contains current percentage and scrollTop values. The callback function appends more content to the element. Pass an object back within the callback function structured as follows: { content: '...' } If you append no additonal content, add the attribute end: true to that object. This code will append ''
.infinitescroll('fetchData');
Tells the infinite scrolling region to make a call to its dataSource for additional content. 
$('#myInfiniteScroll').infinitescroll('fetchData');
$('#myInfiniteScroll').infinitescroll('fetchData', {force: true});
Parameter description
force Optional. Boolean dictating whether to bypass the button click in hybrid mode and immediately call dataSoruce for more content. Defaults to false

Examples

Turn any element into an infinite scrolling region with content that loads on demand.

Auto-loads content
Loads with button

<div class="fu-example section">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6">
        <div class="panel panel-default">
          <div class="panel-heading">Auto-loads content</div>
          <div class="panel-body">
            <div class="infinitescroll" id="myInfiniteScroll1" style="height: 200px;"></div>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="panel panel-default">
          <div class="panel-heading">Loads with button</div>
          <div class="panel-body">
            <div class="infinitescroll" id="myInfiniteScroll2" style="height: 200px;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>