在w3.css中，当modal的内容足够大时，它会添加一个vertical scrollbar，这是很常见的，Okay。但是当主 HTML 文档有自己的滚动条时，两个滚动条会加在一起很丑。
请看下面的代码片段:
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
<h2>Modal</h2>
<p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p>
<button onclick="document.getElementById('id01').style.display='block'" class="w3-btn w3-black">Open Modal</button>
<p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p>
<div id="id01" class="w3-modal">
<div class="w3-modal-content w3-card-4">
<header class="w3-container w3-teal">
<span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<h2>Header</h2>
</header>
<div class="w3-container">
<p>Some text. Some text. Some text.</p>
<p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
<p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
<p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
<p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
<p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
<p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
<p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
<p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
<p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
<p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
<p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
<p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
<p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
<p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
<p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
<p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
<p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
<p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
<p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
<p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
<p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
<p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
<p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
<p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
<p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
<p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
<p>Some text. Some text. Some text.</p>
</div>
<footer class="w3-container w3-teal">
<p>Footer</p>
</footer>
</div>
</div>
</div>
</body>
</html>能否请您指导我如何避免这种情况？
最佳答案
它对我有用。你可以删除滚动条的宽度，只需使用 ::-webkit-scrollbar 这个选择器
.w3-container{
max-height: 500px;
overflow: auto;
}
.w3-container::-webkit-scrollbar {
width: 0;
}
关于javascript - 当模态在 w3.css 中滚动时如何隐藏文档垂直滚动条？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54618608/