Question

我认为每个人都知道通过从移动设备顶部拉下来刷新网页的方法。

我想做同样的事情，但我想从底部拉起。我也不需要任何动画。

我需要类似的内容：从底部拉起（例如）10像素时刷新页面。

在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>

如何自下而上刷新网页而不显示动画

1 个答案: