CODEWITHSUNDEEP
htmlcss
Giorgi Nakeuri
Giorgi Nakeuri

Reputation: 35780

Scrollable body under fixed div

I have a problem where my body content can be scrolled even with hidden overflow. This can be reproduced in IE using the following link: https://plnkr.co/edit/2o6dID5rB9zAdeUfiVDb?p=preview

If I click left mouse button and move it down the body content will be scrolled down. Is there any workaround?

body {
    height: 100%;
    overflow: hidden;
}

.modal-backdrop {
  position:fixed;
  top:0;
    width: 100%;
    height: 100%;
    z-index: 10001;
    background-color: red;
    opacity: 0.4;
}

.event-modal-wrapper {
    position: fixed;
    z-index: 10002;
    top: 0;
    margin: 0 auto;
    padding-top: 140px;
    padding-bottom: 140px;
    right: 0;
    width:300px;
    max-width: 95%;
    height: auto;
}

.event-modal-container {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #e9ebee;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    overflow: auto;
    padding: 10px;
    z-index: 10003;
}
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
          
    <div class="modal-backdrop" ></div>
    
    <div class="event-modal-wrapper">
        <div class="event-modal-container">
            asdsa<br />
            asdsa<br />

            asdsa<br />        asdsa<br />
            asdsa<br />
            asdsa<br />
            asdsa<br />
            asdsa<br />        asdsa<br />
            asdsa<br />
            asdsa<br />
            asdsa<br />
            asdsa<br />        asdsa<br />
            asdsa<br />
            asdsa<br />
            asdsa<br />
            asdsa<br />        asdsa<br />
            asdsa<br />
            asdsa<br />
            asdsa<br />
            asdsa<br />        asdsa<br />
            asdsa<br />
            asdsa<br />
            asdsa<br />
            asdsa<br />        asdsa<br />
            asdsa<br />
            asdsa<br />
            asdsa<br />
            aaaaaa<br />
        </div>
    </div>    
  </body>

</html>

Upvotes: 3

Views: 67

Answers (1)

Dekel
Dekel

Reputation: 62536

I'm almost sure there is no css solution here (however I truly hope there is...)

Meanwhile - here is an HTML5 workaround:

<body draggable="true" ondragstart="event.preventDefault()">

And if you want a javascript solution you can use this:

window.onload = function() {
    body = document.getElementsByTagName('body')[0]
    body.addEventListener('mousedown', function() {
        event.preventDefault();
    })
}

You will probably want to add some workaround for clicks on anchors (if you have any), but in general it should work.

Upvotes: 1

Related Questions