纯javascript拉刷新答案

【问题标题】：Pure javascript pull to refresh纯javascript拉刷新
【发布时间】：2014-09-24 22:07:30
【问题描述】：

几年来我一直在寻找这个。我已经尝试过诸如 iscroll 之类的库，但我需要一些不影响滚动的东西。只是一个纯粹的 javascript pull-to-refresh，没有任何依赖项，例如 iscroll 或 jquery。

这可能吗？当然，它必须是平滑的，我自己建造了一个，结果并不是太好。我认为它会像在滚动的 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 滚动阻力的最佳方法是什么？在大多数拉动和刷新中，有一些阻力会随着您拉得越远而增加。当您到达某个距离时，例如 200 像素，外部 div 上的滚动速度应该减慢到 0。

【问题讨论】：

“这可能吗？”是的当然。那些其他库是用 JavaScript 编写的，所以 jQuery 可以做的所有事情，你都可以自己做。并寻找年？真的吗？！
如果没有 javascript 库，使用 javascript 库可以实现的一切。
去看看那些库的底层代码。我的意思是，我有一辆带轮子的汽车。我不想创造一种方法让它用某种橡胶物质滚动，我宁愿只使用某人制造的轮胎。但是，如果您愿意，您可以深入了解它。所有这些库都是开放的。
@GolezTrol 是的，每次我开始一个新项目时，我都会四处寻找插件或教程，但似乎还没有人做出不依赖库的插件。
@AmritKahlon 我为我的一个 Phonegap 应用程序写了一个。我使用了 CSS3 过渡，这样它既漂亮又流畅。如果您有兴趣，我可以尝试发布一个示例。

标签： javascript html pull-to-refresh

【解决方案1】：

当您位于所选容器的顶部时，以下控制器会处理页面的重新加载。您可以将要查找的容器的选择器传递给控制器。在我的例子中，容器选择器是#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();

【讨论】：