CODEWITHSUNDEEP
javascripthtmlcssreactjsmodal-dialog
physicsboy
physicsboy

Reputation: 6326

Modal present but body still scrolls

I am working in React and attempting to stop my body from scrolling while my modal is open.

I have seen multiple posts about this, all suggesting to add overflow: hidden as the solution, however I can't seem to get this to work.

FYI - My example is a simplistic representation with a modal forced to be open and no dynamic variables in place for the time being. I am just trying to figure this test case out so I can integrate into my code.

Component

export default function App() {
  return (
    <div className="App modal-open">
      <h1>Hello CodeSandbox</h1>
      <br />
      ... <!-- Added multiple <br/>s to force scrollable body -->
      <h2>Start editing to see some magic happen!</h2>

      <div className="modal-container">
        <div className="modal-content">My modal</div>
      </div>
    </div>
  );
}

CSS

.modal-open {
  background: red;
  overflow: hidden;
  overflow-y: hidden;
}

.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}
.modal-content {
  position: fixed;
  background: white;
  width: 80%;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Here is my codesandbox

Upvotes: 1

Views: 249

Answers (1)

elpmid
elpmid

Reputation: 932

To solve that you can add a body selector on your css and put overflow:hidden.

edited codesandbox

Then you can conditionally add a logic however you want.

Upvotes: 1

Related Questions