Ways to reload a webpage from the bottom without any animation

Question

Ways to reload a webpage from the bottom without any animation

It seems common knowledge that refreshing a webpage on mobile devices can be done by pulling down from the top.

However, I am looking to shake things up and refresh the page by pulling up from the bottom instead. And I prefer no animations in the process.

I envision something like this: triggering a page refresh when pulling up (e.g. 10px) from the bottom.

In my search on Google, I have only come across pull-down-from-top solutions which all include animations and excessive code.

Does anyone out there have any clever ideas or tips on how to achieve this unconventional method?

javascript jquery html css pull-to-refresh

Answer 1

Answer №1

I created a demonstration using the scroll function and displaying an additional div to continuously check scrolling down.

To prevent triggering the appearance of the new content too quickly, I utilized the setTimeout method.

Please review this code and let me know if you have any questions.

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 have made some improvements for you.

var latestPosition = 0;


var flag = false;
$(window).scroll(function() {
    if ($(window).scrollTop() + $(window).height() == $(document).height()) {
        // reached bottom
        flag = true;
    }
    // scrolling back up
    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>

Answer 2

I created a demonstration using the scroll function and displaying an additional div to continuously check scrolling down.

To prevent triggering the appearance of the new content too quickly, I utilized the setTimeout method.

Please review this code and let me know if you have any questions.

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 have made some improvements for you.

var latestPosition = 0;


var flag = false;
$(window).scroll(function() {
    if ($(window).scrollTop() + $(window).height() == $(document).height()) {
        // reached bottom
        flag = true;
    }
    // scrolling back up
    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>

Ways to reload a webpage from the bottom without any animation

Answer №1

Similar questions

Dynamic Navbar that Adapts to Your Scroll

Create a web application in NodeJS that mimics browser functionality by running JavaScript code from an HTML page

What steps are involved in testing a nextjs endpoint with Jest?

Symfony2 - Utilizing an Entity repository to encode data into JSON for efficient AJAX calls

Attempt to import Recharts into React was unsuccessful

What is the process of adding a phone number with an extension on an iPhone web application?

Building a Basic Calculator with Jquery, Ajax, and Servlet

The $routeProvider is unable to load the view specified in ngRoute

Combining 1 pixel borders to create a bolder border effect

Creating a vertical scrollbar with CSS flexbox for columns set at 100% height in a row for FF, IE, and

Correcting the 1 pixel spacing issue in 3 containers each with a width of 33.333%

Transform the JSON object into a TypeScript array

Develop a feature within a standard plugin that allows users to add, remove, or refresh content easily

Issue with floating date and time not functioning properly in ICS file for Yahoo Calendar

Guide on dynamically loading a PHP file into a div using jQuery Load method and passing parameters

Creating a Smooth Curve with CSS

Error in loading jquery for Mediawiki version 1.27.4

Clicking outside the div will cause the div to be hidden

Using static assets within VueJS Components

Divide the information in the table across several pages for easier printing