Pull down to refresh บน mobile web browser ใน HTML

เมื่อมีความต้องการดึงหน้าจอลงเพื่อรีเฟรชหน้าเพื่อรับข่าวสารล่าสุด สามารถทำได้ด้วย JavaScript, XHR และ touch events

Pull refresh เป็น trigger ให้ XHR ใน AJAX เพิ่มข้อมูลใหม่เข้าไปใน element ที่ต้องการ

Pull refresh สามารถ implement ด้วย hijacked JavaScript scrolling mechanism เช่น iScroll Twitter ใช้ iScroll สำหรับ pull refresh

อีกวิธีคือสร้าง refresh handler สำหรับองค์ประกอบ overflow:scroll

อินเตอร์เฟซที่ให้มาแสดงแนวคิดเกี่ยวกับ 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's height > than content wrapper's height,
  // then change the main wrapper height to be the height of the content wrapper.
  // scroll main wrapper.
  // invoke initializeEvents() to initialize the events
};