Theorie
Wenn Sie die aktuelle Implementierung der pinterest-Site betrachten (sie kann sich in Zukunft ändern), wird beim Öffnen des Overlays eine noscrollKlasse auf das bodyElement angewendet und overflow: hiddenfestgelegt, sodass sie bodynicht mehr scrollbar ist.
Das Overlay (erstellt on-the-fly oder bereits innerhalb der Seite und sichtbar gemacht durch display: block, macht es keinen Unterschied) hat position : fixedund overflow-y: scroll, mit top, left, rightund bottomEigenschaften auf 0: dieser Stil macht das das gesamte Ansichtsfenster füllen Overlay.
Das divInnere der Überlagerung befindet sich stattdessen genau in position: staticder vertikalen Bildlaufleiste, die Sie sehen, und bezieht sich auf dieses Element. Infolgedessen kann der Inhalt gescrollt werden, die Überlagerung bleibt jedoch fest.
Wenn Sie den Zoom schließen, verbergen Sie das Overlay (via display: none) und können es dann auch vollständig per Javascript entfernen (oder nur den Inhalt darin, es liegt an Ihnen, wie Sie es einfügen).
Als letzten Schritt müssen Sie auch die noscrollKlasse aus dem entfernen body(damit die Überlaufeigenschaft auf ihren Anfangswert zurückkehrt).
Code
Codepen Beispiel
(Es funktioniert durch Ändern des aria-hiddenAttributs des Overlays, um es anzuzeigen und auszublenden und seine Zugänglichkeit zu verbessern.)
Markup
(Schaltfläche zum Öffnen)
<button type="button" class="open-overlay">OPEN LAYER</button>
(Schaltfläche zum Überlagern und Schließen)
<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 (Vanille-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);
});
Schließlich ist hier ein weiteres Beispiel, in dem die Überlagerung mit einem Einblendeffekt durch ein transitionauf die opacityEigenschaft angewendetes CSS geöffnet wird . Außerdem padding-rightwird a angewendet, um einen Reflow auf den zugrunde liegenden Text zu vermeiden, wenn die Bildlaufleiste verschwindet.
Codepen Beispiel (verblassen)
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;
}