JS+CSS implements pull-down refresh/pull-up loading plug-in

/**
  * Add scroll bars to the specified container, supporting pull-down refresh and pull-up loading functions
  * @param container requires scrolling, css: position!=static,height=
  * @param option configuration item, see the defaultOption description below for details
  * @return Return object is used to manipulate this area. The refresh function of iscroll is currently exposed. When you add/delete content to the scroll area outside the plug-in, you should actively call it once.
  * @description
  *
  * 2017-03-29
  * 1) Support pull-up loading
  * 2017-03-30
  * 1) Change to jquery static function plugin
  * 2) Supports shutdown pull-down refresh or pull-up loading
  */
$.installPullToRefresh =
function (container, option) {
  // Start touch position  var touchStartY = 0;
  // Start icon position  var pullStartY = 0;
  // Current touch event  var touchEvent = null;
  // Current refresh event  var refreshEvent = null;
  // Current icon position  var curY = -55;
  // The current loading event  var loadEvent = null;
  // Default parameters  var defaultOption = {
    // Refresh related    noRefresh: false, // Close the pull-down refresh feature    pauseBound: 40, // The position where the refresh is triggered (also where the icon loading pauses)    lowerBound: 80, // How much px is the maximum pull-down    loadImg: "", // loading pictures    pullImg: "", // Pull down picture    onRefresh: function (refreshDone) { // Refresh data callback      setTimeout(function() { // Nothing is done by default        refreshDone();
      }, 0);
    },
    // Load related    noLoad: false, // Close the pull-up loading feature    bottomHeight: 1, // How much px will start the refresh from the bottom of the scroll bar    onLoad: function (loadDone) {
      setTimeout(function() {
        loadDone();
      }, 0);
    },
  };
  var finalOption = $.extend(true, defaultOption, option);
  // Create an iscroll5 scroll area  var iscroll = new IScroll(container, {
    bounce: false,
  });
  // Close the pull-up loading feature  if (!) {
    // Listen to the scroll end event, used to pull up and load    ('scrollEnd', function () {
      // Pull-up loading is only allowed if there is a scroll bar      if ( &lt; 0) { // maxScrollY<0 indicates that a scrollbar appears        var bottomDistance = ( - ) * -1;
        // Close enough to the bottom to trigger loading        if (bottomDistance &lt;= ) {
          // The current events are not refreshed and loaded          if (!loadEvent &amp;&amp; !refreshEvent) {
            loadEvent = {}; // Generate new loading event            (function (error, msg) {
              loadEvent = null; // Clean up the current loading event              // Delay redraw scrollbar              setTimeout(function () {
                ();
              }, 0);
            });
          }
        }
      }
    });
  }
  // Close the pull-down refresh feature  if (!) {
    // Immediately adjacent to the scrolling area, accommodates the refresh icon    var pullContainer = $('&lt;div class="pullContainer"&gt;&lt;/div&gt;')
    // Create small icons    var pullToRefresh = $('&lt;div class="pullToRefresh"&gt;&lt;img src="' +  + '"&gt;&lt;/div&gt;');
    // Keep the shortcut to small icons    var pullImg = ("img");
    // Add small icon to the container    (pullToRefresh);
    // Before adding the small icon container to the scroll area    $(container).before(pullContainer);
    // Preload loadIng    $('&lt;img src="' +  + '"&gt;');
    // Set transform function    function cssTransform(node, content) {
      ({
        '-webkit-transform' : content,
        '-moz-transform'  : content,
        '-ms-transform'   : content,
        '-o-transform'   : content,
        'transform'     : content,
      });
    }
    // Adjust the position, angle, transparency of the small icon    function goTowards(translateY, rotate, opcaticy) {
      // Update the position of the current small icon and obtaining css (transform) is troublesome, so save it yourself every time you change it      curY = translateY;
      // Rotate icon (rotate according to the ratio of reaching lowerBound, maximum 1 turn)      if (rotate === undefined) {
        rotate = (curY / ) * 360;
      }
      // Transparency is calculated based on the ratio of arrival at pauseBound      if (opcaticy === undefined) {
        opcaticy = (curY / ) * 1;
        if (opcaticy &gt; 1) {
          opcaticy = 1;
        }
      }
      // Change position and rotation angle      cssTransform(pullToRefresh, "translateY(" + translateY + "px) translateZ(0)" + "rotateZ(" + rotate + "deg)");
      // Change transparency      ("opacity", opcaticy);
    }
    // Turn on the rebound animation    function tryStartBackTranTop() {
      // Start the rebound animation      ("backTranTop");
      // Determine whether refresh is triggered      if (curY &gt;= ) {
        goTowards();
        // Refresh is initiated after the rebound animation is finished        ('transitionend webkitTransitionEnd oTransitionEnd', function (event) {
          // Since transitionend will callback each property once, only one of them will be processed          if ( == "transform") {
            // Pause animation            ("backTranTop");
            ();
            // Transparency reset to 1            goTowards(, undefined, 1);
            // Switch the picture to loading picture            ("src", );
            // Because anamition will override transform, use top to temporarily locate elements            ("loadingAnimation");
            ("top",  + "px");
            // The callback refreshes the data, and the refreshEvent should be passed back to verification in the end            (function (error, msg) {
              // The DOM is usually updated when the user calls back, and it is necessary to notify iscroll adjustment (the official suggests delaying execution, which involves browser redrawing issues)              setTimeout(function () {
                ();
              }, 0);
              // Reset the angle and switch to pull diagram              goTowards();
              // Cancel animation, reset top              ("loadingAnimation");
              ("top", "");
              // Delay transition animation for 100 milliseconds, giving the browser a chance to redraw              setTimeout(function () {
                // Switch to pull image                ("src", );
                // Restore animation                ("backTranTop");
                // Refresh completed                refreshEvent = null;
                // bounce back to the top                goTowards(-55);
              }, 100);
            });
          }
        });
      } else {
        goTowards(-55); // bounce back to the top        refreshEvent = null; // No refresh trigger condition has been reached      }
    }
    // Parent container registration pull-down event    $(container).on("touchstart", function (event) {
      // New touch event      touchEvent = {};
      // There is a refresh event in progress      if (refreshEvent) {
        return;
      }
      // A new refresh event can be generated only if the scroll axis is close to the top      if ( &lt; -1 * ) {
        return;
      }
      // A new refresh event      refreshEvent = touchEvent;
      touchStartY = [0].clientY;
      pullStartY = curY;
      // If it exists, turn off the rebound animation and related monitoring      ("backTranTop");
      ();
      // Switch to pull image      ("src", );
    }).on("touchmove", function (event) {
      // Touch before refreshing is completed, it will be ignored      if (touchEvent != refreshEvent) {
        return;
      }
      var touchCurY = [0].clientY;
      var touchDistance = touchCurY - touchStartY; // The distance of this movement      var curPullY = pullStartY + touchDistance; // Calculate the position to which the icon should be moved      // Can't pull out the range down      if (curPullY &gt; ) {
        curPullY = ;
      }
      // Can't pull out the range upward      if (curPullY &lt;= -55) {
        curPullY = -55;
      }
      // Update the icon position      goTowards(curPullY);
    }).on("touchend", function (event) {
      // Touch before refreshing is completed, it will be ignored      if (touchEvent != refreshEvent) {
        return;
      }
      // Try to start the rebound animation      tryStartBackTranTop();
    });
  }
  // Initialize iscroll  setTimeout(function() {
    ();
  }, 0);
  // Return the tool object that operates this area  return {
    // If the user has modified the content of the scrolling area outside the pull-down refresh, he needs to actively call refresh    refresh: function() {
      // Delay to cooperate with browser repaint      setTimeout(function() {
        ();
      }, 0);
    },
    // Trigger pull-down refresh    triggerPull: function() {
      // Refreshing or disable      if (refreshEvent || ) {
        return false;
      }
      // Pause the possible ongoing final stage rebound animation      ("backTranTop");
      // move the small icon to lowerbound position      goTowards();
      // Create a new refresh event, and the pit can prevent the touch before setTimeout from causing refresh      refreshEvent = {};
      // Delay to browser repaint      setTimeout(function() {
        tryStartBackTranTop();
      }, 100);
    },
  };
};
Contact GitHub API Training Shop Blog About
© 2017 GitHub, Inc. Terms Privacy Security Status Help

.pullToRefresh {
  position:absolute;
  left:0;
  right:0;
  margin:auto;
  width: 50px;
  height: 50px;
  z-index: 10;
  opacity: 1;
  transform:translateY(-55px) translateZ(0) rotateZ(0deg);
  -ms-transform:translateY(-55px) translateZ(0) rotateZ(0deg);   /* IE 9 */
  -moz-transform:translateY(-55px) translateZ(0) rotateZ(0deg);   /* Firefox */
  -webkit-transform:translateY(-55px) translateZ(0) rotateZ(0deg); /* Safari and Chrome */
  -o-transform:translateY(-55px) translateZ(0) rotateZ(0deg);   /* Opera */
}
.backTranTop
{
  transition: transform 0.8s ease, opacity 0.8s ease;
  -moz-transition: transform 0.8s ease, opacity 0.8s ease; /* Firefox 4 */
  -webkit-transition: transform 0.8s ease, opacity 0.8s ease; /* Safari and Chrome */
  -o-transition: transform 0.8s ease, opacity 0.8s ease; /* Opera */
}
.pullContainer {
  position:relative;
}
.pullToRefresh img {
  display:block;
  width: 40px;
  height: 40px;
  /* Let img center in .pullToRefresh */
  position: absolute;
  top: 0;
  bottom: 0;
  left:0;
  right:0;
  margin:auto;
}
/* loading rotation animation */
.loadingAnimation
{
  animation: loadingFrame 1s infinite;
  -moz-animation: loadingFrame 1s infinite;  /* Firefox */
  -webkit-animation: loadingFrame 1s infinite;  /* Safari and Chrome */
  -o-animation: loadingFrame 1s infinite;  /* Opera */
}
@keyframes loadingFrame
{
  from {
    transform: rotateZ(360deg);
  }
  to {
    transform: rotateZ(0deg);
  }
}
@-moz-keyframes loadingFrame /* Firefox */
{
  from {
    transform: rotateZ(360deg);
  }
  to {
    transform: rotateZ(0deg);
  }
}
@-webkit-keyframes loadingFrame /* Safari and Chrome */
{
  from {
    transform: rotateZ(360deg);
  }
  to {
    transform: rotateZ(0deg);
  }
}
@-o-keyframes loadingFrame /* Opera */
{
  from {
    transform: rotateZ(360deg);
  }
  to {
    transform: rotateZ(0deg);
  }
}