时间戳

首页 > 解决方案 > 如何在没有动画的情况下从底部上拉刷新网页

javascript - 如何在没有动画的情况下从底部上拉刷新网页

问题描述

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

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

我需要类似的东西：从底部拉起（例如）10px 时刷新页面。

在谷歌上，我只找到了从顶部下拉的解决方案，它们都有动画，而且大部分代码都很多。

有没有人有想法或暗示如何做到这一点？

标签： javascriptjqueryhtmlcsspull-to-refresh

解决方案

我做了一个例子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>

推荐阅读