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?

javascriptjqueryhtmlcsspull-to-refresh

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Storing Jquery Nestable data in a MySQL database

https://github.com/dbushell/Nestable Using the source code provided by David Bushell, I aim to create nested lists that can be easily dragged and dropped for editing purposes. The database 'sortable' that I am working with consists of four colum ...

phpjquerymysql

Nextjs: Issues with Dropdown functionality when using group and group-focus with TailwindCSS

My goal is to make an array visible once a button is clicked. By default, the array should be invisible, similar to drop-down menus in menu bars. I am utilizing the group and group-focus classes. While the array disappears as expected, it does not reappear ...

javascriptnext.jstailwind-css

Positioning a flex item to the right by using float

I am in need of assistance with my HTML layout. <div class="container"> <div class="sidebar" style="float:right"> Ignore sidebar? </div> <div> main content </div> </div> The container is set to have a flex disp ...

htmlcssflexbox

What is the best way to retrieve an object from the state in my React application?

I have been struggling to locate an item from a collection so that I can update my react component. Despite the fact that the propertyState object is not empty and contains a list that I have successfully console logged, I keep receiving an undefined obj ...

javascriptreactjsreact-hooksundefinedreact-state

A method for merging the values of three text fields and submitting them to a hidden text field

<label class="textRight label95 select205">Cost Center: </label> <input type="hidden" name="label_0" value="Cost Center" /> <input type="text" name="value_0" class="input64 inputTxtGray" value="" maxlength="10" /> <input type=" ...

javascriptjqueryhtml

What could be causing the lack of data to be returned by jQuery.getJSON?

I've come across this method: function getUserName(guid) { var name = "Unknown"; $.getJSON(urlCurrent, { "method" : "get_user_info", "guid" : guid, "auth_token" : temporaryAuthToken }, function(data) { if ...

javascriptjqueryajaxcallbackgetjson

How to hide an item in Ionic 2 using navparams

Is there a way to dynamically hide or show a list item on page load depending on certain parameters? Here is an example of the code I am currently using: HTML <button ion-item (tap)="goToPage2()" [hidden]="shouldHide">Page 2</button> TS ex ...

javascriptangularionic2

What are the steps to achieve form styling using Bootstrap?

I am trying to achieve a specific style using the Bootstrap framework. I have been able to achieve something similar to what I want, but the issue is that the save button is not aligned to the right and is not taking up the available width. There is a gap ...

htmlcssbootstrap-4

Utilize key-value pairs to reference variables when importing as a namespace

Is it feasible to utilize a string for performing a lookup on an imported namespace, or am I approaching this the wrong way? Consider a file named my_file.ts with contents similar to: export const MyThing: CustomType = { propertyOne: "name", ...

javascripttypescriptjavascript-import

Comparison of the "Proposed Recommendation" versus the "Candidate Recommendation"

In a recent piece about HTML5, it was mentioned that the Proposed Recommendation date is set for 2022, while the Candidate Recommendation date is from 2012. I'm curious to understand the distinction between the "Proposed Recommendation" and the "Cand ...

htmlw3c

I prefer to avoid using the "#" sign in URLs

<a href="#" onClick="load_page()">intro</a> I am trying to avoid displaying the # sign in the URL, and I would like it to appear like this instead: www.mydomain.com/ However, it currently displays as follows: www.mydomain.com/# Is there a ...

javascripthtmlajaxanchor

Guide on altering the Class with jquery

Here is My jQuery Code: $('a#cusine1').on('click', function(){ $('div#product-list').html("LOADING..........").show(); $(".ccid").addClass("0"); document.getElementById("ccid1").className="acti ...

javascriptjqueryhtmlcss

`amqplib - What is the current number of active consumers on the queue?`

Seeking insight on using the amqplib module for Node JS and RabbitMQ: 1) Is there a method to determine the number of subscribers on a queue? 2) What is the process for ensuring that each queue has only one consumer key? Appreciate any guidance! ...

javascriptnode.jsrabbitmqamqpnode-amqp

Invoke a functional component when a button is clicked in a React application

I have a functional component that includes a button. My goal is to trigger another functional component when this button is clicked. Upon clicking the Submit button, the Preview button appears. When the user clicks on the preview button, it should call t ...

javascriptreactjs

Keeping Ajax active while the PHP script is running is essential

Seeking assistance with a specific issue. I currently have an ajax script (index.php) that sends variables to a php file (thumbs.php). The php file generates thumbnail images from original files and saves them on the server. This process can sometime ...

jqueryajaxloopssettimeoutcleartimeout

Setting up eslint for your new react project---Would you like any further

I am currently working on a TypeScript-based React application. To start off, I used the following command to create my React app with TypeScript template: npx create-react-app test-app --template typescript It's worth noting that eslint comes pre-co ...

javascriptreactjstypescripteslinteslintrc

Avoid mutating the prop directly and instead, utilize a data or computed property that is based on the value of the prop. The prop that is being mutated in this case is

Help me understand this issue that Vue is displaying, I am not sure what is going on. This is my progress element: <el-progress :percentage="percentCompleted" v-show="uploadingVideo"></el-progress> data() { return{ percentCompleted: 0 ...

javascriptvue.js

Incorporating video responses into an HTML player using Node.js with the req.pipe(res) method

I have successfully implemented ytdl-core to play a video and it is working as expected. Below is the code snippet: app.get('/',function(req,res) { var fs = require('fs'); var ytdl = require('ytdl-core'); ...

javascriptnode.jshtmlexpress

Angular directive ceases to trigger

I am currently working on implementing an infinite scrolling directive. Initially, when the page loads and I start scrolling, I can see the console log. However, after the first scroll, it stops working. It seems like it only triggers once. Can anyone poi ...

javascriptangularjs

Covering the entire screen, the Div element takes up the entirety of

Just like with other pages, the main div always takes up the entire screen visible to the user. As they scroll down, another div becomes visible: example1 , example2 Regardless of the screen size, the main div will always fill the space visible to the use ...

javascripthtmlcss