纯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拉刷新

回答

相关问题