Jump to last scroll position when refreshing the page in Mobile Safari using JavaScript event

Is there a way to detect a JavaScript event triggered when the page is refreshed in Safari, causing it to return to the previous scroll position?

This situation can be frustrating because the scroll event only responds to user-initiated scrolls and won't work in this scenario. I need to identify an event that triggers specifically when the page is refreshed since DOMContentLoaded fires too early, and the window's load event is too late for my needs.

I am looking for a solution as I rely on checking if an element is currently in view using getBoundingClientRect.

Is there something crucial that I'm missing here? Without jQuery, which provides document.ready(), I am limited to vanilla JS without a clear alternative (even though document ready appears unlikely to help based on its source code).

Answer №1

Through a series of trials, it was discovered that the sudden jump in Safari Mobile (and possibly other browsers) is caused by the load/onload event on the window, so simply binding to that event will resolve the issue.

I trust this information proves beneficial to someone out there!

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

What is the best way to show a dropdown menu with options based on the values stored in the useState hook in React and Material UI?

An API that I'm using fetches celebrity names. Currently, I am initializing the state and storing dummy data in it like this: const[drop,setDrop] = useState(["Virat Kohli","Selena Gomez","Deepika Padukone"]); Now, I want my drop-down to include the f ...

Update the class information using jQuery after performing an action and serialize the button's ID for AJAX requests

I'm facing an issue with two buttons on my page: <td> <button id="1" class="green-button">Publish</button> <button id="1" class="yellow-button">Delete</button> </td> The green-button and red-button have different ...

In every scenario, the loading spinner is displayed on Reactjs routes

Within my small application, I have set up various routes that load different components based on the path. One issue I encountered is with the ProductsPage container, where I have a loading spinner to display while waiting for a response from the database ...

The efficiency of Testing Library findBy* queries is optimized when utilized alongside async/await functionality

After reviewing the documentation, it was noted that queries made using findBy return a Promise. Interestingly, utilizing these queries with Promise.prototype.catch() seems ineffective in comparison to pairing them with async/await + try...catch. An insta ...

Retrieve the input values and arrange them neatly in a table

I am encountering an issue with extracting values from a table. My goal is to retrieve all the input values from the table, but I am finding it challenging because the number of rows in the table can vary. <table id="receiptTable" class="table table-bo ...

Is there a glitch in how I set up my countdown timer?

I am facing an issue with updating the label on a countdown timer created using NSTimeInterval. The label does not seem to be refreshing as expected. - (IBAction)startTimer:(id)sender{ timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:sel ...

Reactjs button only responds on the second click instead of the first tap

Currently, I am working on a Reactjs/nextjs project and have a video with audio button on my page. There are two things that I want to achieve: 1) I would like the button to have the "bi bi-volume-mute" class by default instead of "bi bi-volume-down". 2) W ...

Bring in the content to Notepad utilizing jQuery

How can I export data to Notepad? I have fields for Name, Age, and WorkingStatus that are input as text and textarea. Is there a demo or code available to help me insert this data into Notepad? ...

Looking at an HTML string in its natural HTML form

In my AngularJS app, I have autogenerated HTML code that highlights certain texts. The specific line of code responsible for generating this HTML looks like this: var replaced = original.replace(regEx, '<span style="background-color: red;">&apo ...

Communication between the Node development server and the Spring Boot application was hindered by a Cross-Origin Request

Here is the breakdown of my current setup: Backend: Utilizing Spring Boot (Java) with an endpoint at :8088 Frontend: Running Vue on a Node development server exposed at :8080 On the frontend, I have reconfigured axios in a file named http-common.js to s ...

What is the most efficient way to cycle through HTML image elements and display a unique random image for each one?

I'm currently working on coding a simple game that involves guessing the Hearthstone card based on its flavor text. I plan to add a button later to progress in the game, but I haven't implemented that yet. To start, I created 4 image elements an ...

Manipulating JSON arrays in Javascript - Remove an object from the array

I'm looking to remove an element from a JSON objects array. Here's the array: var standardRatingArray = [ { "Q": "Meal", "type": "stars" }, { "Q": "Drinks", "type": "stars" }, { "Q": "Cleanliness", "type": " ...

Create a Vue application that utilizes a promise to display content and then waits for user input

Seeking guidance for a design query, I am dealing with a JavaScript script that is heavy on logic. It is structured using promises as shown below: init() .then(result => doSomethingA(result)) .then(result => doSomethingB(result)) .then( ...

Leverage the power of JavaScript, along with jQuery and other libraries, to access and manipulate content within an iframe that

Greetings to everyone. I am currently working on a project that involves an application with a view implemented using an iframe. The iframe's src is modified when the user interacts with certain elements in the "parent" document. Essentially, there i ...

Setting headers in Node.js after they have already been sent to the client is not allowed

I'm currently enrolled in a node.js course on Udemy which seems to be outdated. I've encountered some errors that I'm struggling to resolve. Here's what I've tried so far: using next(); adding return res inside all if statements ...

An array of size 10x10 where each new array replaces the previous one

I'm currently working on a function that generates a 10 by 10 array filled with random D's and E's. Below is the code snippet: function generateTenByTenArray(){ var outerArray = []; var innerArray = []; for(var i = 0; i < 10 ...

Instructions on playing a recorded audio file using the POVoiceHUD

Currently, I am utilizing a control within the POVoiceHUD app to record voice. https://github.com/polatolu/POVoiceHUD However, I am facing some difficulties in playing/retrieving the recorded audio file. The demo project lacks the playback feature for th ...

What is the best way to retrieve a value by using the data.get() method?

I am currently facing an issue with retrieving the value of a textarea that I have dynamically added to a fieldset in my form. When I attempt to submit the form, the code below is executed: function handleSubmit(e) { e.preventDefault(); console.log( ...

Displaying large numbers in HTML input fields in a formatted manner, such as adding a space or separator for

Presenting the user on one device with a string of numbers, like so: 123 879 233 223 211 782 782 The numbers are displayed in groups of three, as shown above. Now, the user needs to input these numbers on another device. I want them to enter the numbe ...

What is the best way to compare all the elements in an array to the entries in another object, while also storing the results of each comparison?

I am working with a JSON file that contains an array of 2 objects: `{ bg: 'a', o: 'c' }`, `{hg': 'a2', 'oo': 'c3'}`. My goal is to compare each object in the array with another object structured as fol ...