Теорія
Дивлячись на поточну реалізацію сайту pinterest (це може змінитися в майбутньому), коли ви відкриєте накладення, noscrollклас застосовується до bodyелемента і overflow: hiddenвстановлюється, таким чином body, більше не можна прокручувати.
Накладення (створений на льоту або вже всередині сторінки і зробити видимими з допомогою display: block, це не має ніякого значення) має position : fixedі overflow-y: scroll, з top, left, rightі bottomвластивості встановлено значення 0: цей стиль робить Overlay заповнити всю область перегляду.
Натомість 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 (ванільний-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властивості. Також "a" 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;
}