How to prevent body scrolling once overlay is open?

Question

I am looking for a way to prevent the body from scrolling when the overlay 'popup-section' is opened and to only allow scrolling on the 'popup-section' div. I am looking for a solution using javascript, however, I am not very experienced in JS

Does anyone have any suggestions?

    $('#toggle-menu').click(function() {
      $(this).toggleClass('active');
    $('.popup-section').toggleClass('open');
      $('html').toggleClass('open');
    });

    $('.popup-section').click(function() {
      $(this).toggleClass('active');
    $('.popup-section').removeClass('open');
      $('.button_container').removeClass('active');
      $('html').removeClass('open');
    });

    .popup-section{
      display: none;
      opacity: 0;
      height: 100vh;
      left: 0;
      right: 0;
      width: 100vw;
   overflow: scroll;
    }

    .popup-section.open {
      display: block;
      opacity: 1;
   z-index: 99;
    }

    .popup-background {
      height: 100vh;
      width: 100vw;
      background-color: #ccbcaf;
      z-index: 90;
      cursor: pointer;
   position: fixed;
   overflow: scroll;
      top: 0;
    }

    <div class="button_container open" id="toggle-menu">
      <span class="top"></span>
   <span class="bottom"></span>  
    </div>

    <div class="popup-section">
    <div class="popup-background" title="">
   <!--CONTENT-->
    </div>
    </div>

Possible duplicate of [Prevent body scrolling but allow overlay scrolling](https://stackoverflow.com/questions/9280258/prevent-body-scrolling-but-allow-overlay-scrolling) — Chris Deacy, Jun 01 '19 at 02:58
We really can't see anything your code does, since it's just a blank page when run. There's nothing to scroll or not scroll. Can you show or link to the actual working page? — Bman70, Jun 14 '19 at 05:23

score 6 · Answer 1 · answered Jun 14 '19 at 06:49

Your JQuery actually seems to be mostly working. The popup-section opens and scrolls. To stop the body underneath from scrolling, you can add this line to your existing JQuery:

$('html, body').css({ position: 'fixed'});

Or, you might prefer the effect of this instead: $('html, body').css({ overflow: 'hidden'});

If you want to undo the effect on clicking the popup section, you can reverse it in your next function:

<script>
    $('#toggle-menu').click(function() {
    $(this).toggleClass('active');
    $('.popup-section').toggleClass('open');
    $('html').toggleClass('open');
    $('html, body').css({ position: 'fixed'}); //stops body scroll
    });

    $('.popup-section').click(function() {
    $(this).toggleClass('active');
    $('.popup-section').removeClass('open');
    $('.button_container').removeClass('active');
    $('html').removeClass('open');
    $('html, body').css({ position: 'relative'}); //restarts body scroll
    });
</script>

The snippet was throwing an error when I used JQuery, but it works great on my server with no errors. I had to include the example in an iframe just to show how the popup scrolls while the body stops scrolling.

<iframe src = "https://www.scriptbarrel.com/examples/popup.htm">
</iframe>

Thank you for your response! This is working except when I close the overlay the the body won't scroll again — glittergirl, Jun 14 '19 at 09:31
Did you add the reverse code into your second function? `$('html, body').css({ position: 'relative'});` in the `$('.popup-section').click(function()` part. This stops the body being fixed. That's how my example starts scrolling again. — Bman70, Jun 14 '19 at 13:30

Rakesh Rawat · Answer 2 · 2019-06-14T04:59:26.530

0

We can add/remove following css class or styling to body tag on overlay open and close events.

.popup-section {
  position: fixed; /* added */
  display: none;
  opacity: 0;
  height: 100vh;
  left: 0;
  right: 0;
  width: 100vw;
  overflow: hidden; /* changed */
}

.popup-section.open {
  display: block;
  opacity: 1;
  z-index: 99;
}

.popup-background {
  height: 100vh;
  width: 100vw;
  background-color: #ccbcaf;
  z-index: 90;
  cursor: pointer;
  /* position: fixed; /* Removed */
  overflow: scroll;
  top: 0;
}

html.open body {
  overflow-y: hidden;
}

edited Jun 14 '19 at 04:59

answered Jun 13 '19 at 10:18

Rakesh Rawat

307
3
13

@glittergirl, I have run your example on codepen and added few changes to it. could you please try it. – Rakesh Rawat Jun 14 '19 at 05:02

Evghenii · Answer 3 · 2019-06-19T08:52:52.590

As it was mentioned the idea is to add overflow: hidden property to the body when popup is opened.

Html:

<button class="button">Open</button>

<div class="popup-section">
  <div class="popup-background">
    <!--CONTENT-->
  </div>
</div>

Css:

body.popup-open {
  overflow: hidden;
}

.popup-section{
  display: none;
  height: 90vh;
  width: 90vw;
  left: 0;
  right: 0;
  top: 0;
  right: 0;
  overflow: auto;
  position: fixed;
}

.popup-section.open {
  display: block;
}

.popup-background {
  height: 100vh;
  width: 100vw;
  background-color: #ccbcaf;
  cursor: pointer;
}

NOTE: 90vh it's just an example and is represents the size of the popup. I did it smaller in order to see visually which part is being scrolled. You might need some other value.

Js:

var button = $('.button');
var popup = $('.popup-section');
var body = $('body');

button.click(function() {
  popup.toggleClass('open');
  body.toggleClass('popup-open');
});

$('.popup-section').click(function() {
  popup.removeClass('open');
  body.removeClass('popup-open');
});

Here is working example: https://jsfiddle.net/uazc8jp5/

How to prevent body scrolling once overlay is open?

3 Answers3