如何在显示模态时避免使用双滚动条（没有JavaScript）？

Question

我有一个模式，其内容高于窗口的高度。我希望用户能够在模态中滚动，所以我让它显示滚动条。当模态的滚动条显示时，它还会显示模态后面的整个页面内容的滚动条，这会导致双滚动条。

我在Stack Overflow上找到了几个解决方案，建议在打开模式时使用JavaScript在body或html元素上添加一个类，暂时设置overflow: hidden那些要从页面中删除滚动条的元素，因此只显示模态滚动条。关闭模态后，将删除该类，并返回页面滚动条。

这个解决方案过分依赖JavaScript，我想知道是否只有CSS解决方案。我怎么能这样做？

这是我的代码：https://codepen.io/zeckdude/pen/japmWm?editors=1100

HTML

<main>
  <div id="modal">
    <div id="modal-contents">
      <h1>Modal Contents</h1>
      <p>1) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet mauris et tortor maximus commodo nec vel orci. Nulla semper ultricies faucibus. Phasellus at tristique tortor. Nulla mollis tristique nibh, ut laoreet mauris ultrices nec. Mauris interdum metus tellus, quis euismod nunc laoreet et. Nulla consectetur malesuada eros nec eleifend. Etiam pharetra a nunc et fringilla. Duis nec massa vulputate orci blandit tristique at eget justo. Nunc pellentesque tellus neque, at iaculis nunc viverra et. Proin varius dignissim venenatis. Mauris efficitur nulla eget mauris laoreet, a aliquam metus lobortis. Curabitur consectetur condimentum ex, et tempor purus pharetra scelerisque.</p>
      <p>2) Phasellus lobortis quam nec volutpat pharetra. Nunc in euismod lorem. Integer et orci rutrum, egestas ipsum eget, tincidunt turpis. Suspendisse faucibus, nunc sit amet convallis imperdiet, lorem nisi ullamcorper tellus, vitae auctor elit elit sed tortor. In aliquet sed urna eu vulputate. Cras vel nisi erat. Quisque molestie metus a sollicitudin commodo.</p>
      <p>3) Duis at dui a libero interdum bibendum quis ac urna. Quisque mollis vestibulum felis in pharetra. Proin et ex sed tortor dignissim bibendum. Duis quis sapien nec orci cursus condimentum id et leo. Duis in mattis magna. Praesent sagittis non tortor sed porttitor. Vestibulum aliquet elit posuere ligula tristique, non lacinia nulla faucibus. Ut a gravida augue. Quisque et dui vel odio commodo dignissim. Nam vel ex tortor. Vivamus pulvinar vehicula magna, nec sodales diam. Cras facilisis euismod risus et viverra.</p>
      <p>4) Quisque ut nunc ut erat elementum eleifend. Aenean accumsan nisl sit amet auctor laoreet. Cras blandit varius purus ut porta. Ut non porttitor arcu. Aliquam orci mi, sagittis quis consequat interdum, interdum quis mi. Vestibulum accumsan dui et nibh suscipit ornare. Nam et suscipit magna. Donec nec est sed lacus sodales aliquet. Quisque posuere consequat nulla vitae eleifend. Proin semper massa vel porta hendrerit. Vestibulum varius sollicitudin posuere. Sed eu erat vehicula, condimentum nunc nec, pellentesque lorem.</p>
    </div>
  </div>
  <div id="main-contents">
    <h1>Main Contents</h1>
    <p>1) Ut bibendum dui sed odio cursus, quis iaculis turpis dictum. Proin tempus mauris mi, sed rutrum elit viverra eu. Vivamus sed posuere lacus, bibendum faucibus nunc. Suspendisse molestie sem eget suscipit ornare. Sed dictum feugiat justo, in egestas ligula iaculis in. Suspendisse non hendrerit augue. Phasellus nunc eros, varius ut lacinia ut, efficitur ac ipsum. Sed fringilla magna sit amet est euismod, in congue ligula pellentesque. Phasellus a orci eu elit porta congue. Nullam fermentum elementum mauris, eget aliquam nisi porta vitae.</p>

<p>2) Nam accumsan libero eu tortor ultrices faucibus. Fusce posuere, sem ac dignissim consequat, diam quam accumsan magna, et pellentesque nisi ipsum vitae lorem. Praesent viverra aliquet eleifend. In mattis, sem non tincidunt condimentum, mi risus dapibus odio, eu interdum erat tellus ac turpis. Duis imperdiet condimentum ligula nec molestie. Vivamus laoreet, sem in semper interdum, quam dolor porttitor nisl, id accumsan felis lorem in neque. Aenean porttitor viverra iaculis. Morbi nec tristique urna. Donec ac pretium eros. Fusce placerat, quam et rhoncus fermentum, nisl eros lacinia ex, et euismod neque erat eget justo. Quisque sit amet nunc tristique, tincidunt felis ac, aliquet nisl. Nam vel pretium libero. In sem felis, congue a sodales quis, mollis eu sapien. Aliquam hendrerit pulvinar enim sit amet volutpat. Cras blandit efficitur condimentum.</p>

<p>3) Nam risus ligula, cursus at ipsum quis, malesuada dignissim quam. Donec convallis ligula in lorem vehicula tempor. Maecenas tempor sodales faucibus. Integer eu porttitor augue. Nunc finibus eu justo non bibendum. Pellentesque nisi lectus, venenatis a vulputate ac, faucibus vitae lectus. Vivamus molestie placerat est sed volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris et purus urna. Nunc vitae ex velit. Proin tempor dolor id ex luctus ullamcorper. Aliquam hendrerit interdum justo, at dictum est pretium ac.</p>

<p>4) Aenean vestibulum magna rhoncus porttitor blandit. Sed sit amet convallis magna, sit amet ultrices eros. Sed mollis velit mauris, id finibus ipsum blandit id. Mauris iaculis ornare laoreet. Proin sit amet laoreet mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis vitae pretium urna. Aliquam mollis, diam quis auctor aliquam, nunc nunc laoreet tellus, ut placerat odio libero sit amet justo. Pellentesque elit orci, mollis ut mi eleifend, rutrum commodo tortor. Nunc sodales lorem a tellus laoreet dignissim. Praesent at nisl eu tellus hendrerit volutpat. Curabitur elementum et est quis laoreet. Aliquam semper lorem vitae ante euismod malesuada. Nulla sit amet libero augue. Ut est enim, egestas sed risus sit amet, auctor hendrerit magna.</p>

<p>5) Maecenas placerat nisl sed massa aliquet venenatis. Nam tortor nunc, iaculis sed malesuada at, dignissim a augue. Aenean eget neque tortor. Vivamus est odio, semper interdum mi et, aliquam venenatis nunc. Donec at mollis arcu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam nisi velit, congue sed eros et, euismod convallis lacus. Sed ac feugiat risus, at mattis ante. Sed vitae est ex. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean accumsan, nisl cursus luctus iaculis, purus dolor varius enim, vitae condimentum est tortor quis dolor. Suspendisse ac urna efficitur, tempor libero et, placerat mauris. Proin in interdum nisi, pretium mattis magna. Donec vel facilisis lectus. Sed eu lorem a arcu tempus fringilla vel nec lacus. Curabitur ultricies augue et odio aliquam tempus.</p>
  </div>
</main>

CSS

body {
  margin: 0;
  padding: 0;
}

h1 {
  margin-top: 0;
}

main {
  background-color: blue;
}

#modal {
  width: 100%;
  height: 100%;
  position: fixed;
  overflow: auto;
}

#modal-contents {
  background-color: red;
  padding: 10px;
}

Answer 1

您正在获得双滚动条，因为您的#modal {位置已修复，即position: fixed;，因此您只需将您的位置从fixed更改为relative，即{{1} }