Ik heb op zoek gegaan naar een “lightbox” -type-oplossing waarmee dit het mogelijk maakt, maar er nog geen heb gevonden (alsjeblieft, suggereert als je dat weet).

Het gedrag dat ik probeer te maken, is net als wat je zou zien op Pinterest bij het klikken op een afbeelding. De overlay is schuifbaar (zoals in de hele overlay beweegt als een pagina bovenop een pagina ) maar het lichaam achter de overlay is vast.

Ik heb geprobeerd dit te maken met alleen CSS (IE A divOverlay bovenop de hele pagina en het lichaam met overflow: hidden) , maar het verhindert niet divvan scrolable.

Hoe de body / pagina te behouden van scrollen, maar blijf scrollen in de container Fullscreen?

1, Autoriteit 100%

theorie

Kijkend naar de huidige implementatie van de Pinterest-site (het kan in de toekomst veranderen), wanneer u de overlay opent noscrollKlasse wordt toegepast op de bodyElement en overflow: hiddenis ingesteld, dus bodyis niet langer schuifbaar.

De overlay (on-the-fly of reeds in de pagina gemaakt en zichtbaar gemaakt via display: block, het maakt geen verschil) heeft position : fixedEN overflow-y: scroll, met top, left, rightEN bottomEigenschappen Set Naar 0: Deze stijl maakt de overlay de hele viewport.

De divin de overlay is in plaats daarvan alleen in position: staticdan de verticale schuifbalk die u ziet, is gerelateerd aan dat element. Als gevolg hiervan is de inhoud schuifbaar maar overlay blijft vast.

Als u de zoom sluit, verbergt u de overlay (via display: none) en kunt u deze ook volledig verwijderen via javascript (of alleen de inhoud erin, het is aan u hoe u deze invoegt ).

Als laatste stap moet je ook de klasse noscrollnaar de bodyverwijderen (zodat de eigenschap overflow terugkeert naar zijn oorspronkelijke waarde)

Code

Codepen-voorbeeld

(het werkt door het aria-hiddenattribuut van de overlay te wijzigen om het te tonen en te verbergen en om de toegankelijkheid te vergroten).

Mark-up
(knop openen)

<button type="button" class="open-overlay">OPEN LAYER</button>

(overlay en sluitknop)

<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);
});

Ten slotte, hier is een ander voorbeeld waarin de overlay wordt geopend met een fade-in-effect door een CSS transitiontoegepast op de opacityeigendom. Ook een padding-rightwordt toegepast om een ​​reflow op de onderliggende tekst te voorkomen wanneer de schuifbalk verdwijnt.

COCEIPEN VOORBEELD (FADE)

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; 
}

2, Autoriteit 12%

Als u overscrolling op iOS wilt voorkomen, kunt u een vaste positie toevoegen aan uw .noscroll-klasse

body.noscroll{
    position:fixed;
    overflow:hidden;
}

Antwoord 3, autoriteit 9%

overscroll-behaviorcss-eigenschap maakt het mogelijk om het standaard overloop-scrollgedrag van de browser te negeren bij het bereiken van de boven-/onderkant van inhoud.

Voeg gewoon de volgende stijlen toe aan de overlay:

.overlay {
   overscroll-behavior: contain;
   ...
}

Codepen-demo

Werkt momenteel in Chrome, Firefox en IE(caniuse)

Raadpleeg voor meer informatie het artikel van Google-ontwikkelaars.

Antwoord 4, autoriteit 7%

Gebruik overflow: hidden;niet op body. Het scrolt alles automatisch naar boven. JavaScript is ook niet nodig. Maak gebruik van overflow: auto;. Deze oplossing werkt zelfs met mobiele Safari:

HTML-structuur

<div class="overlay">
    <div class="overlay-content"></div>
</div>
<div class="background-content">
    lengthy content here
</div>

Styling

.overlay{
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgba(0, 0, 0, 0.8);
    .overlay-content {
        height: 100%;
        overflow: scroll;
    }
}
.background-content{
    height: 100%;
    overflow: auto;
}

Bekijk de demo hieren de broncode hier.

Bijwerken:

Voor mensen die de spatiebalk op het toetsenbord willen, pagina omhoog/omlaag om te werken: je moet je concentreren op de overlay, bijvoorbeeld door erop te klikken, of handmatig JS erop focussen vóór dit deel van de divreageert op toetsenbord. Hetzelfde geldt voor wanneer de overlay is “uitgeschakeld”, omdat de overlay gewoon naar de zijkant wordt verplaatst. Anders voor de browser zijn dit slechts twee normale divs en zou het niet weten waarom het zich op een van hen zou moeten concentreren.

Antwoord 5, autoriteit 7%

De meeste oplossingen hebben het probleem dat ze de scrollpositie niet behouden, dus ik heb gekeken hoe Facebook het doet. Naast het instellen van de onderliggende inhoud op position: fixed, stellen ze de bovenkant ook dynamisch in om de schuifpositie te behouden:

scrollPosition = window.pageYOffset;
mainEl.style.top = -scrollPosition + 'px';

Als u de overlay vervolgens weer verwijdert, moet u de schuifpositie opnieuw instellen:

window.scrollTo(0, scrollPosition);

Ik heb een klein voorbeeld gemaakt om deze oplossing te demonstreren

let overlayShown = false;
let scrollPosition = 0;
document.querySelector('.toggle').addEventListener('click', function() {
  if (overlayShown) {
		showOverlay();
  } else {
    removeOverlay();
  }
  overlayShown = !overlayShown;
});
function showOverlay() {
    scrollPosition = window.pageYOffset;
  	const mainEl = document.querySelector('.main-content');
    mainEl.style.top = -scrollPosition + 'px';
  	document.body.classList.add('show-overlay');
}
function removeOverlay() {
		document.body.classList.remove('show-overlay');
  	window.scrollTo(0, scrollPosition);
    const mainEl = document.querySelector('.main-content');
    mainEl.style.top = 0;
}

.main-content {
  background-image: repeating-linear-gradient( lime, blue 103px);
  width: 100%;
  height: 200vh;
}
.show-overlay .main-content {
  position: fixed;
  left: 0;
  right: 0;
  overflow-y: scroll; /* render disabled scroll bar to keep the same width */
}
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  overflow: auto;
}
.show-overlay .overlay {
  display: block;
}
.overlay-content {
  margin: 50px;
  background-image: repeating-linear-gradient( grey, grey 20px, black 20px, black 40px);
  height: 120vh;
}
.toggle {
  position: fixed;
  top: 5px;
  left: 15px;
  padding: 10px;
  background: red;
}
/* reset CSS */
body {
  margin: 0;
}

<main class="main-content"></main>
  <div class="overlay">
    <div class="overlay-content"></div>
  </div>
  <button class="toggle">Overlay</button>

html, body {
    overflow: hidden;
}

<div id="content">
</div>
<div id="overlay">
</div>

overscroll-behavior: contain;

body {
   position: static;
   overflow: auto;
}

body {
   position: sticky;
   overflow: hidden;
}

$("body").css({"position": "sticky", "overflow": "hidden"});

$("body").css({"position": "static", "overflow": "auto"});

document.ontouchmove = function ( event ) {
    var isTouchMoveAllowed = true, target = event.target;
    while ( target !== null ) {
        if ( target.classList && target.classList.contains( 'disable-scrolling' ) ) {
            isTouchMoveAllowed = false;
            break;
        }
        target = target.parentNode;
    }
    if ( !isTouchMoveAllowed ) {
        event.preventDefault();
    }
};

<div class="page disable-scrolling">

const app = document.getElementById('app');
const overlay = document.getElementById('overlay');
let body = '';
for (let index = 0; index < 500; index++) {
  body += index + '<br />';
}
app.innerHTML = body;
app.scrollTop = 200;
overlay.innerHTML = body;

* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
#app {
  background: #f00;
  position: absolute;
  height: 100%;
  width: 100%;
  overflow-y: scroll;
  line-height: 20px;
}
#overlay {
  background: rgba(0,0,0,.5);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  padding: 0 0 0 100px;
  overflow: scroll;
}

<div id='app'></div>
<div id='overlay'></div>

function onMouseOverOverlay(over){
    document.getElementsByTagName("body")[0].style.overflowY = (over?"hidden":"scroll");
    document.getElementsByTagName("html")[0].style.position = (over?"fixed":"static");
    document.getElementsByTagName("html")[0].style.height = (over?"100%":"auto");
}

<body>
  <div class="page">Page content here</div>
  <div class="overlay"></div>
</body>

$(".page").on("touchmove", function(event) {
  event.preventDefault()
});

var mywindow = $('body'), navbarCollap = $('.navbar-collapse');    
navbarCollap.on('show.bs.collapse', function(x) {
                mywindow.css({visibility: 'hidden'});
                $('body').attr("scroll","no").attr("style", "overflow: hidden");
            });
            navbarCollap.on('hide.bs.collapse', function(x) {
                mywindow.css({visibility: 'visible'});
                $('body').attr("scroll","yes").attr("style", "");
            });

   html, body {
        height: 100%;
    }
    .overlay{
        position: fixed;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        background-color: rgba(0, 0, 0, 0.8);
        .overlay-content {
            height: 100%;
            overflow: scroll;
        }
    }
    .background-content{
        height: 100%;
        overflow: auto;
    }

   <div class="overlay">
        <div class="overlay-content"></div>
    </div>
    <div class="background-content">
        lengthy content here
    </div>

Scroll = (
    function(){
          var x,y;
         function hndlr(){
            window.scrollTo(x,y);
            //return;
          }  
          return {
               disable : function(x1,y1){
                    x = x1;
                    y = y1;
                   if(window.addEventListener){
                       window.addEventListener("scroll",hndlr);
                   } 
                   else{
                        window.attachEvent("onscroll", hndlr);
                   }     
               },
               enable: function(){
                      if(window.removeEventListener){
                         window.removeEventListener("scroll",hndlr);
                      }
                      else{
                        window.detachEvent("onscroll", hndlr);
                      }
               } 
          }
    })();
 //for disabled scroll bar.
Scroll.disable(0,document.body.scrollTop);
//for enabled scroll bar.
Scroll.enable();