Pull down to refresh in mobile web browsers in HTML

When you need to pull down the screen to refresh the page to get the latest updates, you can do it with the help of JavaScript, xhttprequests and touch events.

Pull-down refresh is the trigger of XHR in AJAX. It adds new data to the element we want.

Pull-down refresh can be achieved by hijacking the JavaScript scrolling mechanism (such as iscroll). Twitter is using iscroll to implement the pull-down refresh option.

Another way is to create a refresh handler for the overflow:scroll component.

The interface provided can give an idea about the handler interface−

var PullToRefresh= function(callback, wrapper, instructionsText) {

   //It creates dom elements and append them before content wrapper  
   
   // <div class="mainWrapper" style="overflow: scroll; height: 600px;">
   <div class="pullToReloadWrapper"></div><div class = "contentWrapper"></div>
   </div> is the markup.
   
   // if main wrapper&#39;s height is > than content wrapper&#39;s
   height, then change the main wrapper height to be the height of the content wrapper.
   
   // scroll main wrapper.
   // invoke initializeEvents() to inititalize the events
};

The above is the detailed content of Pull down to refresh in mobile web browsers in HTML. For more information, please follow other related articles on the PHP Chinese website!