Is there a way to automatically hide divs with the style "visibility:hidden" if they are not visible within the viewport?

Currently, I am working on developing a mobile web app. Unfortunately, Safari in iOS 5.1 or earlier has limited memory capabilities. In order to reduce memory usage while using css3 transitions, I have discovered that utilizing the css styles "display:none / visibility: hidden" prevents any crashes due to memory issues. Therefore, I aim to hide elements only when they are truly hidden.

Here is an image illustrating my point:

Another instance where a website effectively utilized the "visibility: hidden" property to conceal sections not currently on screen can be found here:

Check out this example website: Dentsu Network

javascriptjqueryioscssweb

Answer №1

If you're using jQuery, there is a handy plugin that provides viewport selectors.

An effective technique is to initially hide everything with visibility:hidden; and then reveal only the items within the user's current viewport. As the user scrolls, you can continually update which elements are in view and display them accordingly.

 $(":in-viewport").css("visibility", "visible")

Answer №2

By utilizing the `document.body.scrollTop` property and the dimensions of the window, it is possible to determine the viewport.

For instance, if the scrollTop value is 100px, this indicates that the user has scrolled down by 100px. At this point, you might consider hiding a div that covers the top 100px of the screen while displaying a div that begins at 101px and continues until reaching the height of the screen.

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

Verify if the form has been refreshed in React JS

In my React application, I have a form inside a modal pop-up. When the user closes the pop-up, I want to check for any changes made in the form fields. If there are changes, I will display a confirmation modal; if not, I will simply close the pop-up. <F ...

javascriptreactjsforms

In React JS, the data from my response is not being saved into the variable

My goal is to store the response data in the variable activityType. Within the useEffect function, I am iterating over an API based on the tabs value. The API will return a boolean value of either true or false. While I can successfully log these values ...

javascriptreactjsnext.jsuse-effectreact-query

What is the process for triggering a method upon the alteration of a global variable?

Apologies for the lack of code in my inquiry! I am looking to create a program that triggers gyroscope updates once the x-axis reading of the accelerometer surpasses a specific threshold value. Once the gyroscope is activated, I need to halt accelerometer ...

iosxcodemethods

Angular: Leveraging Nested Callbacks for Efficient HTTP Queries

I'm currently facing an issue with structured English. GET HTTP Resource FOR every data item received do GET another HTTP Resource Alter the original data from the outer loop with data from the inner GET RETURN altered data How can ...

javascriptangularjs

Ways to retrieve the identifier of a specific element within an array

After successfully retrieving an array of items from my database using PHP as the backend language, I managed to display them correctly in my Ionic view. However, when I attempted to log the id of each item in order to use it for other tasks, it consistent ...

javascriptangulartypescriptionic3

Chartboost displays an interstitial ad when the game is finished

When it comes to displaying an interstitial when the game is over on iOS, I use this function: [[Chartboost sharedChartboost] showInterstitial:CBLocationGameOver]; On the other hand, for Android, I utilize this.cb.showInterstitial(); I am aware that th ...

androidioschartboost

SASS : Loop not producing the most efficient CSS output

Is there a way to optimize CSS generation using a @for loop in SASS? An example speaks louder than words: Here is my SASS code: @for $i from 1 through 2 { .table-lg-#{$i}, .table-md-#{$i}, .table-sm-#{$i}, .table-xs-#{$i} { background: red; ...

cssloopssass

What is the process by which Oracle HRMS retrieves the complete description of a job posting?

With my limited understanding of JavaScript, I noticed that the HRMS refreshes the page and displays the job details under the same URL as the job list page. I expected to find job detail information in the network requests, but upon inspecting them, I dis ...

javascriptpythonseleniumweb-scraping

What is the best way to align all of my content to the center in HTML?

In my web design class, I encountered an issue while creating a page. Currently, my page consists of a navigation bar and an image. I wanted to center both elements using CSS. display: block; margin-left: auto; margin-right: auto I applied this CSS to th ...

htmlcss

Retrieve the JSON array embedded within the JSON string

Can someone help me extract the JSON array from a JSON string? I've been struggling to make it work. Here is the code snippet for reference: // I need assistance with this var all_barcodes = '{"VAM12345":{"colour":"red","size":"32"},"VAM456789" ...

javascriptjqueryjson

When using React Ant Design, the form.resetFields() function does not trigger the onChange event of the Form.Items component

In my project, I am working with the Ant Design <Form> component and handling onChange events within <Form.Items>. Whenever the onChange event function evaluates to true, additional content is displayed dynamically. For instance, in the code s ...

javascriptreactjsantd

Exploring the Node.js Connector: Utilizing Collection.remove

I can't wrap my head around the meaning of this: w, {Number/String, > -1 || ‘majority’ || tag name} the write concern for the operation where < 1 is no acknowlegement of write and w >= 1, w = ‘majority’ or tag acknowledges the ...

javascriptnode.jsmongodb

Is the navigation dropdown toggle triggered by both mouseout and when hovering off of it?

I'm looking for some assistance in modifying the code so that the dropdown menu not only hides on click, but also hides on mouseout and/or when another top-level menu button is hovered over. View jsfiddle example $(document).ready(function () { ...

javascriptjquerycss

Editing the object retrieved from JSON is not possible once it has been fetched

Project. Input text in the field and it appears on the shirt. When you click "see back," there is an issue where new text overlaps old text. Clicking on "see front" allows you to enter new text, with the previous text saved underneath. Question: How can ...

javascriptjqueryjsoncanvasfabricjs

Stranger things happening when incorporating a generator function in React

Here's a simplified version of my component. It includes a generator function that cycles through values. const App = () => { const [state, setState] = useState("1") function* stateSwitch () { while (true){ yield "2" yield "3" ...

javascriptreactjsgenerator

JavaScript Application - Problem with Universal Windows Script

I recently built a website utilizing material design lite for the aesthetics: Here are the scripts included: <script src="./mdl/material.min.js"></script> <script src="Scripts/angular.min.js"></script> The necessary .css fi ...

javascriptcsswindows-10-universalmaterial-design-lite

Divide and conquer - meteorjs

I am currently utilizing the most recent version of Meteor. Meteor is designed to keep everything within the same directory structure, like this: MeteorProject -- .meteor -- client -- imports -- server -- test -- node_modules -- packa ...

javascriptnode.jsmeteor

Overflow of Div Content

I need a way to showcase a collection of around 30 links in a horizontal layout without the links wrapping to a new line if they exceed the width of the parent container. A horizontal scroll should appear for users to navigate through the overflowing links ...

htmlcssflexbox

Tips on defining the specific CSS and JavaScript code to include in your Flask application

I am currently working on a web application using Flask and I need to specify which CSS and JS files should be included in the rendered HTML page based on a condition. There are times when I want to include mycss1.css and myjs1.js: <link href="/sta ...

javascriptpythonhtmlcssflask

Guide to displaying a task within a table cell after a user submits the form

<?php $servername = "localhost"; $username = "u749668864_PandaHost"; $password = "Effy1234"; $dbname = "u749668864_PandaHost"; $q = $_REQUEST["task"]; $task = $q; echo $task; $conn->close(); ?> Exploring the world of ajax has left me scratching ...

javascriptphphtmljqueryajax