-3

I think everybody know the way to refresh a webpage by pulling down from the top on mobile devices.

I want to do the same but I want to pull up from the bottom instead. I also don't need any animation.

I need something like: refresh page when pulling up (e.g.) 10px from bottom.

With Google I only found pull-down-from-top solutions and they all have animations and mostly have to much code.

Does anybody have an idea or hint how to do that?

David
  • 2,898
  • 3
  • 21
  • 57
  • 1
    Please be a bit more specific when asking a question: What have you tried so far with a code example? ([I downvoted because there is no code](http://idownvotedbecau.se/nocode/)) / What do you expect? / What error do you get? **For Help take a look at "[How to ask](https://stackoverflow.com/help/how-to-ask)"** – Dwhitz Jun 27 '18 at 07:18

1 Answers1

1

I made an example by scroll and show extra div for checking continuously scrolling down.

Use setTimeout for not trigger reaching the new showing bottom too fast.

Take a look at this and if there's any question please tell me.

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>

Update

I did this for you.

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>
Terry Wei
  • 1,521
  • 8
  • 16