모달을 표시 할 때 이중 스크롤 막대 (JavaScript없이)를 피하는 방법은 무엇입니까?

Question

저는 윈도우의 높이보다 높은 내용을 가진 모달을 가지고 있습니다. 사용자가 모달 내에서 스크롤 할 수 있도록 스크롤 막대를 표시하도록합니다. 모달에 대한 스크롤 막대가 표시 될 때 모달 뒤에 전체 페이지 내용에 대한 스크롤 막대도 표시되어 이중 스크롤 막대가 표시됩니다.

내가 페이지에서 스크롤 막대를 제거하기 위해 일시적으로 이러한 요소 중 하나에 overflow: hidden을 설정 모달가 열릴 때 body 또는 html 요소에 클래스를 추가하기 위해 자바 스크립트를 사용하는 것이 좋습니다 스택 오버플로에 대한 몇 가지 솔루션을 발견하고 따라서 모달 스크롤 막대 만 표시합니다. 모달이 닫히면 클래스가 제거되고 페이지 스크롤 막대가 반환됩니다.

이 솔루션은 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;