Disappear scrollbar when overlay is activated

How can I hide the scroll bar when an overlay is displayed on my page?

.overlay{
            display: none;
            opacity:0.8;
            background-color:#ccc;
            position:fixed;
            width:100%;
            height:100%;
            top:0px;
            left:0px;
            z-index:1000;
        }
<div onclick="show_overlay_fn()">
        CLICK HERE
        </div>
        <br>

        <div id="overlay" class="overlay"></div>

        <script>
        function show_overlay_fn(){
            document.getElementById("overlay").style.display = "block";
        }
        </script>
        Lots of text to create scroll bars...

javascriptjqueryhtmlcss

Answer №1

To control overflow, you can utilize element.style.overflow and set the property-value accordingly. I also conducted a test with overlay click to re-enable overflow.

function show_overlay_fn(){
document.getElementById("overlay").style.display = "block";
    document.getElementsByTagName("body")[0].style.overflowY = 'hidden';
}
//click listener for overlay
document.getElementById('overlay').addEventListener('click',function(){
  document.getElementById("overlay").style.display = "none";
  document.getElementsByTagName("body")[0].style.overflowY = 'auto';
});
.overlay{
    display: none;
    opacity:0.8;
    background-color:#ccc;
    position:fixed;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    z-index:1000;
}
<div onclick="show_overlay_fn()">
CLICK HERE
</div>
<br>

<div id="overlay" class="overlay"></div>

lost of text to create scrollbars lost of text to create scrollbars lost of text to create scrollbars lost of text to create scrollbars lost of text to create scrollbars lost of text to create scrollbars lost of text to create scrollbars lost of text to create scrollbars lost of text to create...scrollbars

Answer №2

Include an extra class for immobilizing the body

body.freeze-scroll {
  overflow: hidden;
}

Next, implement this within your click event

$('body').toggleClass('freeze-scroll');

Answer №3

You have the option to achieve this using the css() method within the click function

.overlay{
    display: none;
    opacity:0.8;
    background-color:#ccc;
    position:fixed;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    z-index:1000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overlay-click" onclick="show_overlay_fn()">
CLICK HERE
</div>
<br>

<div id="overlay" class="overlay"></div>

<script>
function show_overlay_fn(){
document.getElementById("overlay").style.display = "block";
}

$('.overlay-click').focus(function(){
  $('body').css("overflow","hidden")
});

</script>
lots of unique text inserted here for a scrollable area, creating a diverse and engaging reading experience

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

Unable to receive response from Ajax request

Currently, I am making use of Ajax to send a request to a php file from a form. My intention is to retrieve a result from this php file. Below is the code snippet: <script type="text/javascript"> jQuery(document).ready(function($){ $(&a ...

phpjqueryajax

Passing data from Bootstrap 4 to a modal on a different server

I am currently using NodeJs and Express for my project. I have a requirement to pass data from a MongoDB database to a remote modal in Bootstrap 4. I understand that the "remote" option was removed in version 4 of Bootstrap, but I need to display different ...

jquerynode.jstwitter-bootstrapbootstrap-modalbootstrap-4

Minimize the number of axios requests made every time a Vue component is displayed

I am relatively new to Vue, so please bear with me as I may not have all the knowledge in this area. Within one of my child components (Product_Collection.vue), I am making an axios request to retrieve products from my Shopify store using their GraphQL ...

javascriptvue.jsaxiosshopifyvue-component

ASP.NET Web API calls are not properly deserializing the POST body from XDomainRequest in JSON format

Trying to enable cross-browser, cross-domain support for a web application using MVC4 and making ajax calls to an MVC4 web api, I've resorted to using the XDomainRequest object. This helps in facilitating cross-domain ajax calls from IE < 10 client ...

jqueryasp.net-web-apixdomainrequest

Steps for achieving a seamless transition in jqueryui

I currently have a jQuery toggle function that removes several divs from a webpage: $("a#list-mode").click(function() { $("a#list-mode").toggleClass("rm-toggle"); $("a#map-mode").toggleClass("rm-toggle"); $("div.rm-ta").t ...

jqueryjquery-ui

When the *ngFor directive disrupts the CSS Grid Layout, resulting in all items being displayed in a single column

I am a beginner in the world of programming and web development. Currently, I am working on building my own personal website. My goal is to arrange boxes in a grid with 4 columns, similar to the layout you can find at this link: Each box represents an ob ...

htmlcssangulartypescriptcss-grid

How can you merge webSDK with jQuery within a Vue Component?

I am currently working on incorporating the webSDK found at into our Vue application. My goal is to load jquery only within a single component. Below is the code I have written, however, when I click the button, it does not seem to function as expected. ...

javascriptjqueryvue.jsvuejs2

Using jQuery to remove the td element from an HTML table

Hello everyone, I have a query. I am trying to remove a specific td from a table using JavaScript, but the remove() function is not working. Here is my code: $('.btnEliminarLicencia').off('click'); $('.btnEliminarLicencia&apo ...

javascriptjqueryhtmlajaxjsp

Exploring a JSON Object with Nested Data

I am trying to recursively parse a JSON object in JavaScript. Below is an example of the JSON structure: const obj = { tag: 'AA', type: 'constructed', value: 'ABCD1', child: [ { tag: 'BB', ty ...

javascriptjson

Ensuring Date Data Integrity with HTML5 Validations

I need to set up validation for a mobile website that includes two input fields. The first field should validate that the value is not later than today's date, while the second field should validate that it is not later than one year in advance of the ...

javascriptregexhtml

The Firebase Authentication module encountered an uncaught error: [$injector:modulerr]

I encountered a challenge while developing a small task for Gmail user login and logout using Firebase authentication. The issue in my code is Uncaught Error: [$injector:modulerr] The libraries I included are: <script src='https://cdn.firebase.co ...

javascriptangularjsfirebasefirebase-authenticationangularfire

When a named capture group is included in the regex of a GET path, Express crashes with the error message: "Cannot read property 'name' of undefined at Layer

I am looking to process a GET request and extract specific information from the URL. Let's consider this scenario: const REGEX_QUERY = /^\/?house\/(?<street>[a-z]+)\/(?<house>[0-9]+)$/i; const REGEX_QUERY_NO_NAMES = /^\ ...

javascriptnode.jsexpress

Automating the process of submitting a checkbox

Displayed below is a mix of HTML and JavaScript: <form method = "post" style="display: inline;" name="thisform<?php echo $employee->id; ?>"> <input type="hidden" name="user" value="<?php echo $employee->id; ?&g ...

phpjavascripthtmlforms

What is the best way to ensure consistent display of a bootstrap 4 card structure on both mobile and desktop devices?

I'm attempting to make the bootstrap card look the same on mobile as it does on desktop, but I haven't been able to find a solution online. No snippets have been helpful! Below is a comparison of the appearance of the bootstrap v4 card: Desktop ...

htmlcssbootstrap-4

What is the best method for inserting the HTML content from a specific div into a textarea?

Everything seems to be working fine, but once I insert the HTML into the textarea, an issue arises where the div gets wrapped within another div, causing the layout to break. var urls = []; $('body').on('click', '.btn_video&apos ...

javascriptjquery

Displaying recursively retrieved data from an AJAX call on an HTML page using AngularJS

I am currently working on a recursive AJAX call where I receive server data in chunks. My goal is to display each chunk of data one below another on the front end. How can I achieve this without replacing previously received data with new data? I hope this ...

htmlangularjsasynchronous

Angular Translate - Utilizing translate-values attribute for translation

Having trouble using angular translate with dynamic translation values that need to be translated first. If you want a better explanation of the issue, check out this plunker: PLUNKER <p translate="PARAGRAPH" translate-values="{username: ('us ...

javascriptangularjsangular-translate

Challenges in customizing the bootstrap navigation bar links

Having an issue with the bootstrap navbar link displaying on small devices. Here is the template I'm using: https://i.sstatic.net/jSy1b.png The last item is displaying in two lines. ...

cssresponsivebootstrap-5

Wordpress Bubble Notification - Conceal at Zero / Reveal at One or More

I am a beginner in PHP and CSS. After extensive reading and learning little by little, I successfully implemented notifications in my project using PHP and CSS. It functions properly, displaying the counts (friends, messages, and notifications) and redire ...

phpcsswordpressnotifications

Retrieve a Play Scala variable in the $scope of an AngularJS application

After trying various methods recommended on StackOverflow, I am still struggling to retrieve a Play Scala variable within my Javascript $scope. The line of initialization in an HTML file is as follows: @(playVariable: String)(implicit request: play.api.mv ...

javascriptangularjsscalaplayframework-2.0