Theory
Глядя на текущую реализацию сайта интереса (она может измениться в будущем), когда вы открываете оверлей, класс noscroll применяется к элементу body и устанавливается overflow: hidden, таким образом, body больше не прокручивается.
Наложение (создается на лету или уже внутри страницы и отображается через display: block, без разницы) имеет position : fixed и overflow-y: scroll, с top, left, right и bottom свойства установлены на 0: этот стиль заставляет оверлей заполнять весь видовой экран.
Вместо div внутри оверлея используется только position: static, тогда вертикальная полоса прокрутки, которую вы видите, связана с этим элементом. В результате содержимое прокручивается, но наложение остается фиксированным.
Когда вы закрываете зум, вы скрываете оверлей (через display: none), а затем можете полностью удалить его с помощью javascript (или только содержимого внутри, вам решать, как его вставить).
В качестве последнего шага вы также должны удалить класс noscroll в body (чтобы свойство переполнения вернулось к своему начальному значению)
Код
Пример Codepen
(работает путем изменения атрибута оверлея 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; }
Javascript (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);
});
Наконец, вот еще один пример, в котором наложение открывается с эффектом постепенного появления CSS transition, примененным к свойству opacity. Также padding-right применяется, чтобы избежать перекомпоновки основного текста, когда полоса прокрутки исчезает.
Пример Codepen (затухание)
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;
}