我有一个问题，即使有隐藏的溢出，我的正文内容也可以滚动。这可以使用以下链接在 IE 中重现:https://plnkr.co/edit/2o6dID5rB9zAdeUfiVDb?p=preview
如果我单击鼠标左键并将其向下移动，正文内容将向下滚动。有什么解决方法吗？
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>最佳答案
我几乎可以肯定这里没有 css 解决方案(但我真的希望有...)
同时 - 这是 HTML5 解决方法:
<body draggable="true" ondragstart="event.preventDefault()">
如果你想要一个 javascript 解决方案，你可以使用这个:
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.
关于html - 固定 div 下的可滚动主体，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40466737/