Easy Pull To Refresh Library With Pure JavaScript – pulltorefresh.js

pulltorefresh.js is a lightweight, customizable JavaScript library that adds the pull to refresh (swipe to refresh) functionality to your webpages using pure JavaScript.

How to use it:

Download and include the pulltorefresh.js on your webpage.

<script src="pulltorefresh.js"></script>

Initialize the PullToRefresh with some options.

PullToRefresh.init({
  mainElement: '#main',
  onRefresh: function() { alert('refresh') }
});

Customize the trigger element.

PullToRefresh.init({
  mainElement: '#main',
  triggerElement: '.trigger',
  onRefresh: function() { alert('refresh') }
});

Promise support:

PullToRefresh.init({
  mainElement: '#main', // above which element?
  onRefresh: function(){
    var promise = new Promise(
      function(resolve, reject){
        setTimeout(()=>{
          resolve();
          alert('refresh');
        }, 1500);
      }
    );
    return promise;
  }
});

All default options.

// Minimum distance required to trigger the refresh
distTreshold: 60,
// Maximum distance possible for the element
distMax: 80,
// After the distTreshold is reached and released, the element will have this height
distReload: 50,
bodyOffset: 20,
// Before which element the pull to refresh elements will be
mainElement: 'body',
// Which element should trigger the pull to refresh
triggerElement: 'body',
// What class will the main element have?
ptrElement: '.ptr',
// What class prefix for the elements?
classPrefix: 'ptr--',
// What property will be used to calculate the element's proportions?
cssProp: 'min-height',
// The icon for both instructionsPullToRefresh and instructionsReleaseToRefresh
iconArrow: '⇣',
// The icon when the refresh is in progress.
iconRefreshing: '…',
// The initial instructions string.
instructionsPullToRefresh: 'Pull down to refresh',
// The instructions string when the distTreshold has been reached.
instructionsReleaseToRefresh: 'Release to refresh',
// The refreshing text.
instructionsRefreshing: 'Refreshing',
// The delay, in milliseconds before the onRefresh is triggered.
refreshTimeout: 500,
// The initialize function.
onInit: function () {},
// What will the pull to refresh trigger? You can return a promise. 
onRefresh: function () { return location.reload(); },
// The resistance function, accepts one parameter, must return a number, capping at 1.
resistanceFunction: function (t) { return Math.min(1, t / 2.5); },
// Which condition should be met for pullToRefresh to trigger?
shouldPullToRefresh: function () { return !window.scrollY; }

Changelog:

02/27/2021

• v0.1.22: Bugfix

11/03/2020

• v0.1.21: Updated

11/09/2019

• v0.1.20: Fixed CSS selector

09/11/2018

• v0.1.19: shouldPTR defaults to !window.scrollY; tests and documentation on this use case; more security fixes

08/03/2018

• v0.1.18

05/08/2018

• v0.1.17

12/08/2018

• Fix bad-scope; cleanup

10/02/2018

• Build files and minor fixes

09/08/2018

• v0.1.14: minor fixes