Turn off scrolling for the body content without removing the scrollbar visibility

Whenever I click a thumbnail, a div overlay box appears on top:

.view-overlay {
  display:none;
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  overflow-y:scroll;
  background-color:rgba(0,0,0,0.7);
  z-index:999;
}

Some browsers with non-floating scrollbars may disable scrolling and cause content to shift to the right slightly. I want to prevent this from happening by keeping the scrollbar visible.

Although there are online solutions available, none have provided a definitive fix that works seamlessly across all browsers.

- This solution is effective in Chrome but has glitches in Safari OSX 10.10.

- This solution causes the body to scroll back to the top in Chrome.

Is there a solution that:

a) Disables body scroll when the overlay is opened

b) Maintains the body's original scroll position

c) Keeps the scrollbar visible to prevent content shifting

d) Works without glitches in most, if not all, browsers?

For example, implements this functionality effectively without glitchy behavior in various browsers tested (including Safari).

javascriptjqueryhtmlcss

Answer №1

One effective and simple approach is to place the main content in a wrapper that is a sibling of the overlay instead of directly in the body. This allows for toggling the overlay without impacting the scroll behavior of the content element.

var e = document.getElementById('overlay');
document.body.onclick = function() {
  e.style.display = (!e.style.display || e.style.display === 'block') ? 'none' : 'block';
};
html,
body,
#content {
  height: 100%;
  margin: 0;
}
#content {
  overflow: auto;
}
#high {
  height: 800px;
}
#overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
}
<div id="overlay"></div>
<div id="content">
  Long content resides in this container
  <div id="high"></div>
  And the long content ends here
</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

MUI: tips for positioning text next to each other on a page

I need assistance aligning numbers and text side by side, similar to the image shown here: https://i.sstatic.net/gXzOM.jpg However, there is a margin to the right of the text(MASTER I 406), causing the numbers to not be in the correct position. Currently, ...

cssreactjsmaterial-ui

Trouble encountered with bootstrap toggling when multiple identical inputs are used

Problem with Bootstrap toggle not working on multiple identical inputs unless the first input is pressed. Even then, not all inputs are checked/unchecked. I've created a small example I want to ensure that when one input is toggled, all others have ...

javascriptjqueryhtmltwitter-bootstrap-3

Should reports be created in Angular or Node? Is it better to generate HTML on the client side or server side

I have a daunting task ahead of me - creating 18 intricate reports filled with vast amounts of data for both print and PDF formats. These reports, however, do not require any user interaction. Currently, my process involves the following: The index.html ...

javascriptangularjsnode.jsmongodb

The Express.js main router is functioning properly, however, the other routers connected to it are experiencing

I'm encountering an issue with my routers. The main route /weather is working fine, but other routes connected to it are not functioning properly. app.js const express = require('express'); const weatherRoute = require('./back/routes/w ...

javascriptnode.jsexpressrouterroot

Why is the lower right white space left unfilled by the color red?

I'm having issues with using named lines in grid for layout. The red section is not positioning correctly next to the footer, and I can't figure out where I went wrong. * { box-sizing: border-box; margin: 0; padding: 0; } .container { ...

htmlcsslayoutfrontendgrid

The jQuery show/hide functionality is malfunctioning

In my PHP code, I have the following loop: foreach ($sid as $key => $value) { $sql = " a sql query "; $vehicle->rowQuery($sql); $numRows = $vehicle->rows; while ( $data = $vehicle->result->fetch_assoc()) { $ ...

javascriptphpjquery

Automated task scheduled to execute every minute between the hours of 8am and 4.30pm using Cloudwatch Events

I am facing an issue with my working CRON schedule. It currently runs from 8am to 5pm and I need to change it to end at 4:30pm. Is it possible to set a specific half-hour time interval in CRON? Below is the current setting for my CRON: 0/1 8-17 ? * MON- ...

javascriptlinuxshellcronamazon-cloudwatch

Executing Javascript without invoking the default behavior

Recently, I've been delving into the world of JavaScript and experimenting with the prevent default command for ajax pagination. Here's the code I've come up with: http://jsfiddle.net/6pqfH/2/ $('.pagination').click(function(e){ ...

javascripthtmlajaxpreventdefault

How can I attach a click event to the left border of a div using jQuery?

I am wondering about a div element <div id="preview"> </div> Can anyone suggest a method to attach a click event specifically to the left border of this div? Your help is greatly appreciated. ...

javascriptjqueryhtmlclick

Utilize Jquery to open and view numerous files simultaneously

I have been working with the HTML 5 multiple files feature, allowing users to select and upload multiple files at once. These files are stored as an array of files in the $_FILES variable. My goal is to utilize jQuery to retrieve and display all the file n ...

jqueryjquery-ui

Attaching a CSS file to a personalized WordPress widget

After much searching and struggling due to language barriers or lack of PHP knowledge, I couldn't figure out how to achieve this: public function widget( $args, $instance ) { ?> <div style="padding: 0 0 14% 0"> <div class="m ...

phphtmlcsswordpress

Transform text to lowercase and eliminate whitespace using JavaScript

I am a newcomer to the world of JavaScript and currently focused on building Discord bots. I have successfully coded a bot that responds to messages, but I'm facing issues when the input is in capital letters or contains spaces. The bot fails to res ...

javascriptnode.jsdiscord.js

Retrieve information from a PHP file using AJAX when the output is just a single line

I never thought I would find myself in this situation, but here I am, stuck. I just need a single result from this PHP file, so is using an array really necessary? Despite my efforts to console.log(result) multiple times, all I get back is "null". What c ...

javascriptphpjqueryajax

Ways to pause for the completion of multiple HTTP promises and display a modal exclusively when all promises result in failure

There are two separate HTTP calls on a page that need to be handled independently. vm.$onInit = function() { .... .... //Retrieve all items during initialization ds.getAllItems().then(function(result){ vm.items = result; },funct ...

javascriptangularjshttppromise

Preventing clicks within an iframe

Within an iframe, I have HTML content that includes hyperlinks. I need to prevent clicks on these hyperlinks. I managed to accomplish this using jQuery as shown below. However, I prefer not to use jQuery for this task. How can I achieve the same result ...

javascriptjquery

Set a variable to contain a specific scope in JavaScript

I'm struggling to pass user input from a text box stored in $scope to a firebase query. Here's the code I have so far: $scope.array = []; $scope.addListItem = function(quote){ $scope.array.unshift(quote); console.log(quote) this.customQuote = ...

javascriptangularjsangularjs-scope

Is there a way to retrieve the timestamp of a DOM change event when using MutationObserver for event tracking?

Currently, I am successfully using MutationObserver to monitor changes in the DOM. However, I would like to include a timestamp for each event. Unfortunately, there doesn't seem to be a timestamp property available in the MutationRecord. https://deve ...

javascriptjquerymutation-observers

What is the best way to adjust the width of a button to match the size of its

Is there a way to make a button automatically adjust its width to the parent div it is nested in? . Below is the code (html structure) for reference: <div class="drp"> <button class="drp-btn" id="i-drp-btn">m/s</button> <div i ...

htmlcss

Steps for transforming a JSON into a Class to generate objects

My JSON data is displayed below: var nodeclienthash={ socket:null, init : function() { // Initializing socket.io this.socket = new io.Socket(this.config.host, {port: this.config.port, rememberTransport: false}); } }; I am currently looking t ...

javascriptjsonoop

What is the method to individually determine "true" or "false" using .map() in coding

I am faced with an array of data that needs to be manipulated individually, but it should still function as a cohesive unit. Can you assist me in achieving this? function OrganizeFollow() { const [followStatus, setFollowStatus] = useState([]); co ...

javascriptreactjsreact-hooks