如何从底部上拉刷新没有动画的网页

Question

我想每个人都知道在移动设备上从顶部下拉刷新网页的方法。

我也想这样做，但我想从底部拉起来。我也不需要任何动画。

我需要这样的东西：从底部向上拉（例如）10px 时刷新页面。

对于 Google，我只找到了从顶部下拉的解决方案，它们都有动画，而且大多数代码都很多。

有没有人知道或提示如何做到这一点？

Answer 1

我用 scroll 和 show extra div 做了一个例子，用于检查连续向下滚动。

使用 setTimeout 不会触发太快达到 new showing bottom。

看看这个，如果有任何问题请告诉我。

var latestPosition = 0;

$(window).scroll(function() {
    var $extra = $('#extra');
    if ($(window).scrollTop() + $(window).height() == $(document).height()) {
        if ($extra.is(':visible')) {
            alert('time to reload');
        } else {
            setTimeout(function() {
                $extra.show();
            }, 300)
        }
    }
    // console.log($(window).scrollTop() + " " + latestPosition)
    if ($(window).scrollTop() < latestPosition)
        $extra.hide();
    latestPosition = $(window).scrollTop();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height:2000px; background-color:green" id="content">
</div>
<div style="height:10px; display:none; background-color:red" id="extra">
</div>

更新

这是我为你做的。

var latestPosition = 0;


var flag = false;
$(window).scroll(function() {
    if ($(window).scrollTop() + $(window).height() == $(document).height()) {
        // touch bottom
        flag = true;
    }
    // go back
    else{
      if(flag){
        alert('time to refresh');
        flag = false;
      }
    }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height:2000px; background-color:green" id="content">
</div>

如何从底部上拉刷新没有动画的网页

How to pull up from bottom to refresh webpage without animation

javascript

jquery

html

css

pull-to-refresh