Question

我几年来一直在寻找这个。我尝试过像iscroll这样的库，但我需要的东西不会影响滚动。只是一个纯粹的香草javascript拉动刷新没有任何依赖，如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的滚动添加阻力的最佳方法是什么。在大多数拉动和刷新中，有一些阻力会增加您拉动的进一步下降。当你达到一些距离，例如200px时，外部div上的滚动速度应该减慢到0。

Answer 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();

纯粹的javascript拉动刷新

1 个答案: