モーダルを表示するときにダブルスクロールバー（JavaScriptなし）を避けるにはどうすればよいですか？

Question

私はウィンドウの高さよりも高い内容のモーダルを持っています。ユーザーがモーダル内をスクロールできるようにして、スクロールバーを表示させます。モーダルのスクロールバーが表示されると、モーダルの後ろのページ全体のスクロールバーも表示され、ダブルスクロールバーが表示されます。

は私がページからスクロールバーを削除するために、一時的にこれらの要素のいずれかにoverflow: hiddenを設定し、モーダルが開かれたbodyかhtml要素にクラスを追加するためにJavaScriptを使用することをお勧めしますスタックオーバーフロー上のいくつかの解決策を発見したとモーダルスクロールバーのみが表示されます。モーダルが閉じられると、クラスが削除され、ページスクロールバーが戻ります。

この解決策はJavaScriptにあまりにも頼りすぎて、CSS専用のソリューションがあるかどうかを知りたいと思います。どうやってやるの？ここで

は私codepenです：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すなわちposition: relative;