纯javascript拉刷新

我已经找了几年了。我尝试过像iscroll这样的库，但是我需要一些不影响滚动的东西。只需一个纯普通的javascript就可以刷新，没有任何依赖项，比如iscroll或jquery

这可能吗？当然，它必须是平滑的，我自己做了一个，结果并不太好。我想它会有点像一个滚动的div，在一个滚动的div中滚动。一旦到达内部div的顶部，您就开始滚动外部div，并添加拖动以刷新动画。不太清楚，谢谢

编辑：

好的，这是我到目前为止得到的：

var outer=document.getElementById（'outer'），
内部=document.getElementById（'inner'），
pull=document.getElementById（'pull'）；
//启动底部的外部滚动条
//
outer.scrollTop=拉离视线；
//外卷轴
//
setTimeout（函数（）{
外部.addEventListener（'scroll'，函数（ev）
{
如果（outer.scrollTop以下控制器在您位于所选容器顶部时处理页面的重新加载。您可以将要查找的容器的选择器传递给控制器。在我的情况下，容器选择器为#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();

函数重载控制器（选择器）{
var self=这个；
所选变量=document.querySelector（选择器）；
var startScroll=null；
var startPositionY=null；
var-endPositionY=null；
self.fn={
开始：函数（）{
//添加重新加载容器
var reloadContainer=document.createElement（“div”）；
reloadContainer.id=“d21重新加载页面图标”；
reloadContainer.innerHTML=“RELOAD”；
document.body.appendChild（重载容器）；
//开始刷听
已选择。addEventListener（'touchstart'，函数（e）{
startScroll=selected.scrollTop；
startPositionY=e.changedTouches[0]。客户端；
}
，false）选中。addEventListener（'touchmove'，函数（e）{
var distance=self.fn.d21_calc_reload（e）.distance；
如果（距离>0）{
self.fn.d21_set_重载器（距离，真值）；
}
否则{
self.fn.d21_set_重载器（0，false）；
}
}
，false）选中。addEventListener（'touchend'，函数（e）{
var touchInfo=self.fn.d21_计算_重新加载（e）；
self.fn.d21_set_重载器（0，false）；
if（touchInfo.isReload）location.reload（）；
}
，错）
}
,
d21计算重新加载：函数（e）{
var结果={
isReload:错误，距离：0
}
;
endPositionY=e.changedTouches[0]。客户端；
var距离=结束位置Y-开始位置Y；
如果（距离>0）{
结果.isReload=（startScroll-距离）<-200；
结果：距离=（startScroll-距离）*-1；
}
返回结果；
}
,
d21\U设置\U重新加载器：功能（位置、显示）{
var reloadContainer=document.querySelector（“d21重新加载页面图标”）；
reloadContainer.style.display=show？“块”：“无”；
reloadContainer.style.top=位置+“px”；
}
}
}
var rC=新的重新加载控制器（“post”）；
rC.fn.start（）；
“这可能吗？”是的，当然。那些其他库都是用JavaScript编写的，所以jQuery能做的一切，你都可以自己做。而且要找好几年？真的吗？！有JavaScript库的任何事情都可能没有JavaScript库。只要看看那些库的底层代码就行了。我的意思是，我有一辆带轮子的车。我不指望cre如果我想用某种橡胶材料使它滚动，我宁愿用别人制造的轮胎。但是如果你愿意，你可以找到它的底部。所有的库都是开放的。@GolezTrol是的，每次我开始一个新项目时，我都会四处搜索插件或教程，但似乎还没有人制作一个不依赖于库的插件或教程。@AmritKah我为我的一个Phonegap应用程序写了一个。我使用了CSS3转换，所以它很好而且平滑。如果你感兴趣，我可以试着发布一个例子。
 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();