I have a div that works as a modal, how can I prevent scrolling in the divs behind it?-CodePudding

I want to know what would be the best practice to solve this problem, I just want to be able to scroll the modal and prevent scrolling on the elements below it. the idea is to scroll ONLY in the modal, not in the divs below it

html,
    body {
      padding: 0px;
      margin: 0px;
      height: 100%;
      width: 100%;
    }
    h3 {
      padding: 0px;
      margin: 0px;
      height:2000px;
    }
    h1{
      height:100px;
      border:1px solid red;
    }

    .modalContainer {
      position: fixed;
      height: 100%;
      width: 100%;
      background-color: rgba(255, 255, 0, 0.5);
      transition: all 300ms ease-out;
      transform: translateY(100%);
    }

    .modalShow {
      transform: translateY(0%);
    }
    .modalHide {
      transform: translateY(100%);
    }

<div>
      <div id="modal" class="modalContainer modalShow">
       <h1>Content modal!</h1>
       <h1>Content modal1!</h1>
       <h1>Content modal1!</h1>
       <h1>Content modal1!</h1>
       <h1>Content modal1!</h1>
       <h1>Content modal1!</h1>
       <h1>Content modal1!</h1>
       <h1>Content modal1!</h1>
       <h1>Content modal1!</h1>


      </div>
      <h3>hello</h3>
 </div>

thanks

CodePudding user response：

You want to use a portal. Portals let you define the react component in a different part of the dom tree which prevents the scrolling.

CodePudding user response：

In your code you have 2 classes .modalShow and .modalHide you can use those 2 and add to the CSS overflow-y: hidden in the .modalShow class and overflow-y: scroll to the .modalHide class in your style.css like this:

html,
body {
  padding: 0px;
  margin: 0px;
  height: 100%;
  width: 100%;
}
h3 {
  padding: 0px;
  margin: 0px;
}

.modalContainer {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: rgba(255, 255, 0, 0.5);
  transition: all 300ms ease-out;
  transform: translateY(100%);
}

.modalShow {
  transform: translateY(0%);
  overflow: hidden; /* Here */
}
.modalHide {
  transform: translateY(100%);
  overflow: scroll; /* Here */
}

Also here you can see other ways to prevent scrolling in your modal: https://css-tricks.com/prevent-page-scrolling-when-a-modal-is-open/