이론
가장 관심있는 사이트의 현재 구현을 살펴보면 (향후 변경 될 수 있음) 오버레이를 열면 noscroll클래스가 body요소에 적용되고 overflow: hidden설정되므로 body더 이상 스크롤 할 수 없습니다.
(더 - 플라이 또는 이미 페이지 내부로 보이게 만든 오버레이 display: block가지며, 그 차이가 없습니다) position : fixed와 overflow-y: scroll함께, top, left, right및 bottom속성 설정0 :이 스타일은 전체 뷰포트를 채우기 오버레이합니다.
div오버레이 내부는 대신입니다 position: static당신이 볼 수있는 수직 스크롤이 그 요소와 관련이 있습니다. 결과적으로 내용은 스크롤 가능하지만 오버레이는 고정되어 있습니다.
확대 / 축소를 닫으면 오버레이를 숨기고 (를 통해 display: none) 자바 스크립트 를 통해 오버레이를 완전히 제거 할 수도 있습니다 (또는 내용 만 삽입하는 방법은 사용자에게 달려 있습니다).
마지막 단계로 noscroll클래스를 제거 해야합니다 body(overflow 속성은 초기 값으로 돌아갑니다)
암호
코드 펜 예
( aria-hidden오버레이를 표시하고 숨기고 접근성을 높이기 위해 오버레이 의 속성을 변경하여 작동합니다 ).
마크 업
(열기 버튼)
<button type="button" class="open-overlay">OPEN LAYER</button>
(오버레이 및 닫기 버튼)
<section class="overlay" aria-hidden="true">
<div>
<h2>Hello, I'm the overlayer</h2>
...
<button type="button" class="close-overlay">CLOSE LAYER</button>
</div>
</section>
CSS
.noscroll {
overflow: hidden;
}
.overlay {
position: fixed;
overflow-y: scroll;
top: 0; right: 0; bottom: 0; left: 0; }
[aria-hidden="true"] { display: none; }
[aria-hidden="false"] { display: block; }
자바 스크립트 (vanilla-JS)
var body = document.body,
overlay = document.querySelector('.overlay'),
overlayBtts = document.querySelectorAll('button[class$="overlay"]');
[].forEach.call(overlayBtts, function(btt) {
btt.addEventListener('click', function() {
/* Detect the button class name */
var overlayOpen = this.className === 'open-overlay';
/* Toggle the aria-hidden state on the overlay and the
no-scroll class on the body */
overlay.setAttribute('aria-hidden', !overlayOpen);
body.classList.toggle('noscroll', overlayOpen);
/* On some mobile browser when the overlay was previously
opened and scrolled, if you open it again it doesn't
reset its scrollTop property */
overlay.scrollTop = 0;
}, false);
});
마지막으로, 속성에 transition적용된 CSS 에 의해 페이드 인 효과로 오버레이가 열리는 또 다른 예가 opacity있습니다. 또한 padding-right스크롤 막대가 사라질 때 기본 텍스트에서 리플 로우를 피하기 위해 a 가 적용됩니다.
코드 펜 예제 (페이드)
CSS
.noscroll { overflow: hidden; }
@media (min-device-width: 1025px) {
/* not strictly necessary, just an experiment for
this specific example and couldn't be necessary
at all on some browser */
.noscroll {
padding-right: 15px;
}
}
.overlay {
position: fixed;
overflow-y: scroll;
top: 0; left: 0; right: 0; bottom: 0;
}
[aria-hidden="true"] {
transition: opacity 1s, z-index 0s 1s;
width: 100vw;
z-index: -1;
opacity: 0;
}
[aria-hidden="false"] {
transition: opacity 1s;
width: 100%;
z-index: 1;
opacity: 1;
}