当模态在w3.css中滚动时如何隐藏文档垂直滚动条？答案

【问题标题】：How hide document vertical scrollbar when modal has scroll itself in w3.css?当模态在w3.css中滚动时如何隐藏文档垂直滚动条？
【发布时间】：2019-02-11 00:57:24
【问题描述】：

在w3.css中当modal的内容足够大的时候，会添加一个vertical scrollbar，这很常见，OK。但是当主 HTML 文档有自己的滚动条时，两个滚动条会加在一起，很丑。

请看下面的sn-p代码：

<!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">&times;</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>

您能指导我如何避免这种情况吗？

【问题讨论】：

在这种情况下，我使用 jquery 插件，例如 nicescroll：nicescroll.areaaperta.com/demo
个人建议：远离 w3schools。他们与 W3C 没有任何关系。他们只是利用向任何寻找官方规格的人展示广告。一个更好的资源是 MDN，它得到了 W3C、Google、Mozilla、Microsoft 和许多其他的支持。无论如何，通过在打开模式时在 <body> 上添加一个类、在关闭模式时提供 <body> overflow:hidden 并从 <body> 中删除相同的类来解决您的问题。
作为旁注，我没有反对 w3schools 的意见。只是，为了跟上规范，他们需要付钱给雇主来更新内容，而 MDN 是由 W3C 支持的，当规范发生变化时，内容会自动更改。集成在很大程度上是自动化的。 MDN 是基于大型企业和个人开发人员的自愿努力，这意味着他们将始终拥有更多资源来保持内容最新，即使该过程根本不会自动化。

标签： javascript html css w3.css

【解决方案1】：

它对我有用。您可以删除滚动条的宽度，只需使用::-webkit-scrollbar这个选择器

.w3-container{
  max-height: 500px;
  overflow: auto;
}
.w3-container::-webkit-scrollbar {
  width: 0;
}

【讨论】：

你把可用性抛到了窗外。您不能再在滚动条上单击和拖动。可能看起来并不重要，但有些人依赖特定类型的辅助功能才能使用网络。