純JavaScript拉刷新

我一直在尋找這幾年現在。我試過了像iscroll這樣的庫，但我需要一些不影響滾動的東西。只是一個純粹的香草JavaScript拉到刷新沒有任何依賴，如iscroll或jQuery。純JavaScript拉刷新

這可能嗎？當然，我必須保持順暢，我自己創造了一個並沒有變得太好的人。我認爲它會像在滾動的div內滾動一樣的div。一旦你到達內部div的頂部，你開始滾動外部div並添加拉動來刷新動畫。不太確定，謝謝。

編輯：

好吧，這裏是我走到這一步： http://jsfiddle.net/y65wrw25/2/

var outer = document.getElementById('outer'), 
    inner = document.getElementById('inner'), 
    pull = document.getElementById('pull'); 

// Start the outer scroller at the bottom 
// 
outer.scrollTop = pull.offsetHeight; 

// On outer scroll 
// 
setTimeout(function(){ 
    outer.addEventListener('scroll', function(ev) 
    { 
     if (outer.scrollTop <= 100) 
     { 
      pull.innerText = 'Now release'; 
     } 
     console.log(outer.scrollTop); 
    }, false); 
}, 200);

什麼是阻力增加外div的滾動的最好方法。在大部分拉動和刷新中，都會有一些阻力進一步向下拉動。當你達到一定距離時，例如200px，外部div的滾動速度應該慢到0.

來源

2014-09-24 Amrit Kahlon

「這可能嗎？」當然是。那些其他的庫是用JavaScript編寫的，所以jQuery可以做的一切，你可以自己做。並尋找*年*？真？！ – GolezTrol 2014-09-24 22:09:28

任何可能的JavaScript庫都可能沒有JavaScript庫。 – dave 2014-09-24 22:09:29

只要看看這些庫的底層代碼。我的意思是，我有一輛帶輪子的汽車。我並不想創造一種方式讓它與某種橡膠物質一起滾動，我寧願只是使用某人制造的輪胎。但是如果你願意的話，你可以深入其中。所有這些庫都是開放的。 – Leeish 2014-09-24 22:54:19

當您位於所選容器的頂部時，folowing控制器會處理頁面的重新加載。您可以將控制器傳遞給您想要查找的容器的選擇器。在我的情況下，容器選擇器是#post。希望這可能會對你有所幫助。來自德國的問候：

function reloadController(selector) { 
    var self=this; 
    var selected=document.querySelector(selector); 
    var startScroll=null; 
    var startPositionY=null; 
    var endPositionY=null; 
    self.fn= { 
     start: function() { 
      // add reload container 
      var reloadContainer=document.createElement("div"); 
      reloadContainer.id="d21-reload-page-icon"; 
      reloadContainer.innerHTML="RELOAD"; 
      document.body.appendChild(reloadContainer); 
      // start swipe listening 
      selected.addEventListener('touchstart', function(e) { 
       startScroll=selected.scrollTop; 
       startPositionY=e.changedTouches[0].clientY; 
      } 
      , false) selected.addEventListener('touchmove', function(e) { 
       var distance=self.fn.d21_calc_reload(e).distance; 
       if(distance > 0) { 
        self.fn.d21_set_reloader(distance, true); 
       } 
       else { 
        self.fn.d21_set_reloader(0, false); 
       } 
      } 
      , false) selected.addEventListener('touchend', function(e) { 
       var touchInfo=self.fn.d21_calc_reload(e); 
       self.fn.d21_set_reloader(0, false); 
       if(touchInfo.isReload) location.reload(); 
      } 
      , false) 
     } 
     , 
     d21_calc_reload: function(e) { 
      var result= { 
       isReload: false, distance: 0 
      } 
      ; 
      endPositionY=e.changedTouches[0].clientY; 
      var distance=endPositionY - startPositionY; 
      if(distance > 0) { 
       result.isReload=(startScroll - distance) < -200; 
       result.distance=(startScroll - distance) * -1; 
      } 
      return result; 
     } 
     , 
     d21_set_reloader: function(position, show) { 
      var reloadContainer=document.querySelector("#d21-reload-page-icon"); 
      reloadContainer.style.display=show ? "block": "none"; 
      reloadContainer.style.top=position + "px"; 
     } 
    } 
} 

var rC=new reloadController("#post"); 
rC.fn.start();

來源

2017-07-21 14:53:55

純JavaScript拉刷新

回答

相關問題