Home > Web Front-end > HTML Tutorial > Pull down to refresh in mobile web browsers in HTML

Pull down to refresh in mobile web browsers in HTML

PHPz
Release: 2023-09-06 08:01:11
forward
1256 people have browsed it

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
};
Copy after login

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!

source:tutorialspoint.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template