Ich habe nach einer Lösung vom Typ "Leuchtkasten" gesucht, die dies ermöglicht, aber noch keine gefunden (bitte schlagen Sie vor, wenn Sie eine kennen).

Das Verhalten, das ich neu erstellen möchte, entspricht genau dem, was Sie bei Pinterest sehen würden, wenn Sie auf ein Bild klicken. Das Overlay kann gescrollt werden ( da sich das gesamte Overlay wie eine Seite über einer Seite nach oben bewegt ), aber der Körper hinter dem Overlay ist fixiert.

Ich habe versucht, dies nur mit CSS zu erstellen ( dh mit einem divOverlay über der gesamten Seite und dem gesamten Textkörperoverflow: hidden ), aber es verhindert nicht, dass dives scrollbar ist.

Wie kann verhindert werden, dass der Text / die Seite gescrollt wird, während im Vollbild-Container weiter gescrollt wird?

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

Wenn Sie ein Überschreiben auf ios verhindern möchten, können Sie Ihrer .noscroll-Klasse eine feste Position hinzufügen

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

Nicht verwenden overflow: hidden;auf body. Es wird automatisch alles nach oben gescrollt. JavaScript ist ebenfalls nicht erforderlich. Gebrauch machen vonoverflow: auto; . Diese Lösung funktioniert sogar mit Mobile Safari:

HTML-Struktur

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

Sehen Sie die Demo hier und den Quellcode hier .

Aktualisieren:

Wenn Sie möchten, dass die Leertaste auf der Tastatur funktioniert, müssen Sie sich auf das Overlay konzentrieren, z. B. darauf klicken, oder JS manuell darauf fokussieren, bevor dieser Teil der divTastatur reagiert. Gleiches gilt, wenn das Overlay "ausgeschaltet" ist, da es das Overlay nur zur Seite bewegt. Ansonsten sind dies für den Browser nur zwei normale divs und es würde nicht wissen, warum es sich auf eines von ihnen konzentrieren sollte.

overscroll-behavior Mit der CSS-Eigenschaft kann das standardmäßige Überlauf-Scroll-Verhalten des Browsers überschrieben werden, wenn der obere oder untere Rand des Inhalts erreicht wird.

Fügen Sie einfach die folgenden Stile zum Überlagern hinzu:

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

Codepen-Demo

Derzeit funktioniert in Chrome, Firefox und IE ( caniuse )

Weitere Informationen finden Sie im Artikel der Google-Entwickler .

Die meisten Lösungen haben das Problem, dass sie die Bildlaufposition nicht beibehalten. Deshalb habe ich mir angesehen, wie Facebook dies tut. Zusätzlich zum Festlegen des zugrunde liegenden Inhalts wird position: fixedder obere Bereich dynamisch festgelegt, um die Bildlaufposition beizubehalten:

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

Wenn Sie die Überlagerung erneut entfernen, müssen Sie die Bildlaufposition zurücksetzen:

window.scrollTo(0, scrollPosition);

Ich habe ein kleines Beispiel erstellt, um diese Lösung zu demonstrieren

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>

Es ist erwähnenswert, dass das Hinzufügen von "Überlauf: versteckt" zum Body-Tag manchmal nicht funktioniert. In diesen Fällen müssen Sie die Eigenschaft auch dem HTML-Tag hinzufügen.

html, body {
    overflow: hidden;
}

Wenn Sie möchten, dass ein Elternteil (in diesem Fall der Körper) das Scrollen verhindert, wenn ein Kind (in diesem Fall die Überlagerung) einen Bildlauf durchführt, machen Sie das Kind im Allgemeinen zu einem Geschwister des Elternteils, um zu verhindern, dass das Bildlaufereignis sprudelt das Elternteil. Wenn das übergeordnete Element der Körper ist, ist hierfür ein zusätzliches Umhüllungselement erforderlich:

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

Weitere Informationen zur Funktionsweise finden Sie unter Scrollen bestimmter DIV-Inhalte mit der Hauptscrollleiste des Browsers .

Die gewählte Antwort ist korrekt, weist jedoch einige Einschränkungen auf:

• Superharte "Schleudern" mit Ihrem Finger scrollen immer noch <body>im Hintergrund
• Durch Öffnen der virtuellen Tastatur durch Tippen auf eine <input>im Modal werden alle zukünftigen Schriftrollen geleitet<body>

Ich habe keine Lösung für das erste Problem, wollte aber etwas Licht in das zweite bringen. Verwirrenderweise hatte Bootstrap das Tastaturproblem dokumentiert, behauptete jedoch, es sei behoben worden, und führte als Beispiel für das Update http://output.jsbin.com/cacido/quiet an.

In der Tat funktioniert dieses Beispiel unter iOS mit meinen Tests einwandfrei. Ein Upgrade auf den neuesten Bootstrap (v4) führt jedoch zu einer Unterbrechung.

Um herauszufinden, was der Unterschied zwischen ihnen ist, habe ich einen Testfall so reduziert, dass er nicht mehr von Bootstrap abhängt ( http://codepen.io/WestonThayer/pen/bgZxBG) .

Die entscheidenden Faktoren sind bizarr. Um das Tastaturproblem zu vermeiden, scheint es erforderlich zu sein, dass background-color es nicht im Stammverzeichnis festgelegt ist, <div>das das Modal enthält, und dass der Inhalt des Modals in einem anderen verschachtelt sein muss <div>, das möglicherweise background-colorfestgelegt wurde.

Kommentieren Sie zum Testen die folgende Zeile im Codepen-Beispiel aus:

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: none;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  /* UNCOMMENT TO BREAK */
/*   background-color: white; */
}

Fügen Sie bei Touch-Geräten ein 1 Pixel breites, 101vhtransparentes Div mit minimaler Höhe in die Hülle des Overlays ein. Dann -webkit-overflow-scrolling:touch; overflow-y: auto;zum Wrapper hinzufügen . Dies täuscht die mobile Safari vor, dass das Overlay scrollbar ist, wodurch das Berührungsereignis vom Körper abgefangen wird.

Hier ist eine Beispielseite. Öffnen Sie auf einer mobilen Safari: http://www.originalfunction.com/overlay.html

https://gist.github.com/YarGnawh/90e0647f21b5fa78d2f678909673507f

Das Verhalten, das Sie verhindern möchten, wird als Bildlaufverkettung bezeichnet. Um es zu deaktivieren, setzen Sie

overscroll-behavior: contain;

auf Ihrem Overlay in CSS.

Ich fand diese Frage beim Versuch, das Problem zu lösen, das ich mit meiner Seite auf dem iPad und dem iPhone hatte - der Körper scrollte, als ich festes div als Popup mit Bild anzeigte.

Einige Antworten sind gut, aber keine hat mein Problem gelöst. Ich fand folgenden Blog-Beitrag von Christoffer Pettersson. Die dort vorgestellte Lösung half mir bei Problemen mit iOS-Geräten und half beim Scrollen des Hintergrundproblems.

Sechs Dinge, die ich über das Scrollen von iOS Safari-Gummibändern gelernt habe

Wie vorgeschlagen, füge ich wichtige Punkte des Blogposts hinzu, falls der Link veraltet ist.

"Um zu deaktivieren, dass der Benutzer die Hintergrundseite scrollen kann, während das" Menü geöffnet ist ", können Sie steuern, welche Elemente gescrollt werden dürfen oder nicht, indem Sie JavaScript und eine CSS-Klasse anwenden.

Basierend auf dieser Stackoverflow- Antwort können Sie steuern, dass Elemente mit dem Deaktivierungs-Bildlauf ihre Standard-Bildlaufaktion nicht ausführen sollen, wenn das Touchmove-Ereignis ausgelöst wird. "

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

Und dann setzen Sie die Disable-Scrolling-Klasse auf die Seite div:

<div class="page disable-scrolling">

Sie können dies leicht mit einigen "neuen" CSS und JQuery tun.

Anfänglich: body {... overflow:auto;} Mit JQuery können Sie dynamisch zwischen "Overlay" und "Body" wechseln. Wenn auf "Körper", verwenden Sie

body {
   position: static;
   overflow: auto;
}

Bei Überlagerung verwenden

body {
   position: sticky;
   overflow: hidden;
}

JQuery für den Switch ('body' -> 'overlay'):

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

JQuery für den Switch ('Overlay' -> 'Body'):

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

Ich möchte zu früheren Antworten hinzufügen, weil ich versucht habe, dies zu tun, und einige Layouts brachen, sobald ich den Körper in die Position schaltete: behoben. Um dies zu vermeiden, musste ich auch die Körpergröße auf 100% einstellen:

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

Verwenden Sie den folgenden HTML-Code:

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

Dann JavaScript zum Abfangen und Stoppen des Bildlaufs:

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

Dann, um die Dinge wieder normal zu machen:

$(".page").off("touchmove");

Wenn die Absicht besteht, auf Mobil- / Touch-Geräten zu deaktivieren, ist die Verwendung am einfachsten touch-action: none;.

Beispiel:

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>

(Das Beispiel funktioniert nicht im Kontext des Stapelüberlaufs. Sie müssen es auf einer eigenständigen Seite neu erstellen.)

Wenn Sie das Scrollen des #appContainers deaktivieren möchten , fügen Sie einfach hinzu touch-action: none;.

Versuche dies

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

Wenn Sie den Körper- / HTML-Bildlauf stoppen möchten, fügen Sie Folgendes hinzu

CSS

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

HTML

    <div class="overlay">
        <div class="overlay-content"></div>
    </div>

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

Grundsätzlich könnte man es ohne JS machen.

Die Hauptidee ist, HTML / Body mit der Höhe: 100% und dem Überlauf: Auto hinzuzufügen. In Ihrem Overlay können Sie den Bildlauf je nach Anforderung entweder aktivieren / deaktivieren.

Hoffe das hilft!

In meinem Fall hat keine dieser Lösungen auf dem iPhone (iOS 11.0) funktioniert.

Die einzige effektive Lösung, die auf allen meinen Geräten funktioniert, ist diese - ios-10-Safari-verhindert-das-Scrollen-hinter-einer-festen-Overlay-und-beibehalten-Scroll-Position

Verwenden Sie den folgenden Code zum Deaktivieren und Aktivieren der Bildlaufleiste.

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