To prevent the scrollbar from showing up:

$('body').css('overflow', 'hidden');

By executing this code, the scrollbar will be hidden

Creating a background fade effect:

I implemented my own custom popup dialog widget with a background effect. Here is the CSS I used:

div.modal{
    position: fixed;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9998;
    background-color: #000;
    display: none;
    filter: alpha(opacity=25); /* internet explorer */
    -khtml-opacity: 0.25; /* khtml, old safari */
    -moz-opacity: 0.25; /* mozilla, netscape */
    opacity: 0.25; /* fx, safari, opera */
}

Encountering a similar issue, I needed to prevent vertical scrolling when displaying a "popup" div.

Although changing the overflow property of the body did disable scrolling, it also caused some disruptions to the document's width.

To address this, I turned to jQuery for a solution that involved using a scrollbar placeholder without attaching it to the scroll event. This approach ensures that the scrollbar position remains unchanged and eliminates any flickering issues :)

Here is the setup in HTML:

<div id="scrollPlaceHolder"></div>

And the corresponding CSS:

body, html {
    height: 100%; /* must be included */
}
#scrollPlaceHolder {
    height: 100%;
    width: 0px;
    float: right;
    display: inline;
    top: 0;
    right: 0;
    position: fixed;
    background-color: #eee;
    z-index: 100;
}

The jQuery functions implemented are as follows:

function DisableScrollbar() {
    // exit if page cannot scroll
    if ($(document).height() == $('body').height()) return;

    var old_width = $(document).width();
    var new_width = old_width;
    
    // IDs \ classes to modify
    var items_to_change = "#Banner, #Footer, #Content";

    $('body').css('overflow-y', 'hidden');
    
    // obtain new width
    new_width = $(document).width();

    // reset widths of items to their original sizes (prior to hiding the scrollbar)
    $(items_to_change).width(old_width);

    // set placeholder width to match the disappeared scrollbar width
    $("#ScrollbarPlaceholder").show().width(new_width - old_width);

    // adjust positioning of the items accordingly
    $(items_to_change).css("float", "left");
}

function EnableScrollbar() {
    // exit if scrolling is not enabled
    if ($(document).height() == $('body').height()) return;
    
    // remove the placeholder and restore scrollbar functionality
    $("#ScrollbarPlaceholder").fadeOut(function() {
        $('body').css('overflow-y','auto');
    });
}

Hopefully, this explanation proves useful!

If you're experiencing issues with your page's scroll position when switching the body's 'overflow-y' property, consider implementing these 2 jQuery functions:

// Call this function when your popup opens:
var disableBodyScroll = function(){
    window.body_scroll_pos = $(window).scrollTop(); // store current scroll position in a global variable
    $('body').css('overflow-y','hidden');
}

// Call this function when your popup closes:
var enableBodyScroll = function(){
    $('body').css('overflow-y','scroll');
    $(window).scrollTop(window.body_scroll_pos); // restore original scroll position from the global variable
}

Here is a snippet of code you can use to disable and enable the scroll bar on a webpage:

Scroll = (
    function(){
          var x,y;
         function handler(){
            window.scrollTo(x,y);
          }  
          return {

               disable : function(x1,y1){
                    x = x1;
                    y = y1;
                   if(window.addEventListener){
                       window.addEventListener("scroll",handler);
                   } 
                   else{
                        window.attachEvent("onscroll", handler);
                   }     

               },
               enable: function(){
                      if(window.removeEventListener){
                         window.removeEventListener("scroll",handler);
                      }
                      else{
                        window.detachEvent("onscroll", handler);
                      }
               } 

          }
    })();
 //for disabled scroll bar.
Scroll.disable(0,document.body.scrollTop);
//for enabled scroll bar.
Scroll.enable();

https://jsfiddle.net/satishdodia/L9vfhdwq/1/
html:- Launch modal

Modal Popup Example

This is an example of a modal popup that stops scrolling when opened and resumes scroll upon closure.

Close Modal

**css:-**    
        #popup{
        position: fixed;
        background: rgba(0,0,0,.8);
        display: none;
        top: 20px;
        left: 50px;
        width: 300px;
        height: 200px;
        border: 1px solid #000;
        border-radius: 5px;
        padding: 5px;
        color: #fff;
    } 
**jquery**:-
       <script type="text/javascript">
        $("#open_popup").click(function(){
        $("#popup").css("display", "block");
        $('body').css('overflow', 'hidden');
      });

      $("#close_popup").click(function(){
        $("#popup").css("display", "none");
        $('body').css('overflow', 'scroll');
      }); 
      </script>

Dealing with a similar issue led me to discover a solution - simply prevent touchmove propagation on the specific element causing the problem. In my case, it was a fullscreen menu that prevented scrolling, but now it works seamlessly.

$(document).on("touchmove","#menu-left-toggle",function(e){
    e.stopPropagation();
});

This solution has been quite effective for me.

HTML:

<div id="payu-modal" class="modal-payu">

      <!-- Modal content -->
      <div class="modal-content">
        <span class="close">&times;</span>
        <p>Some text in the Modal..</p>
      </div>

    </div>

CSS:

.modal-payu {
  display: none; /* Initially hidden */
  position: fixed; /* Stays fixed on the screen */
  z-index: 1; /* On top of other elements */
  padding-top: 100px; /* Position from the top */
  left: 0;
  bottom: 0;


  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Scrollbar if needed */
  background-color: rgb(0,0,0); /* Dark background color */
  background-color: rgba(0,0,0,0.4); /* Black with opacity */
}

/* Styling for modal content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* Close button design */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

JS:

<script>
      var btn = document.getElementById("button_1");
      btn.onclick = function() {
        modal.style.display = "block";
        $('html').css('overflow', 'hidden');
      }

    var span = document.getElementsByClassName("close")[0];
    var modal = document.getElementById('payu-modal');

    window.onclick = function(event) {
      if (event.target != modal) {
      }else{
        modal.style.display = "none";
        $('html').css('overflow', 'scroll');
      }
    }

    span.onclick = function() {
      modal.style.display = "none";
      $('html').css('overflow', 'scroll');
    }

    </script>

I encountered an issue and experimented with various solutions, I found a helpful article that resolved my problem (https://css-tricks.com/prevent-page-scrolling-when-a-modal-is-open/) and it was straightforward!

The solution involves using the 'fixed body' technique, which is commonly mentioned in many sources. One drawback of this approach is that when the modal closes, the page automatically scrolls to the top. However, the article suggests manipulating CSS attributes such as top and position alongside the solution to retain the scroll position.

Another limitation of the method is its inability to handle multiple modals simultaneously. To address this, I implemented a counter variable to track the number of active modals, preventing unwanted triggers during initialization or reset processes.

Here is the final implementation I achieved:

// Freeze or unfreeze body scrolling:

const objectCountRef = { current: 0 }

function freezeBodyScroll () {
  if (objectCountRef.current === 0) {  
    document.body.style.top = `-${window.scrollY}px`
    document.body.style.position = 'fixed'
  }
  objectCountRef.current += 1
}
function freeBodyScroll () {
  objectCountRef.current -= 1
  if (objectCountRef.current === 0) {  
    const scrollY = document.body.style.top
    document.body.style.position = ''
    document.body.style.top = ''
    window.scrollTo(0, parseInt(scrollY || '0') * -1)
  }
}

You can view a demo on my Codepen profile: https://codepen.io/tabsteveyang/pen/WNpbvyb

Edit

Insights on the 'fixed body' solution

This method primarily involves assigning the CSS position property of the body element to 'fixed' for making it unscrollable. One downside is that regardless of the scroll position, fixing the body causes it to always return to the top, leading to a suboptimal user experience.

Enhancements from the referenced article

In addition to the 'fixed body' concept, the solution adjusts the CSS top attribute of the body to '-window.scrollY px' to visually maintain the current scroll position while the body remains fixed. Moreover, by utilizing the body's top value as a temporary indicator, we can retrieve the previous scroll position when reenabling scrolling capabilities. (Remember to multiply the obtained position by -1 for correct values)