Menu
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>
975
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.
124
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
