Verhindern Sie das Scrollen des Körpers, aber erlauben Sie das Scrollen über die Überlagerung

444

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?

PotatoFro
quelle
Ist dies nicht nur ein "Overlay" -Plugin wie Hunderte da draußen, dessen Position mit einem Überlauf-y-Scroll festgelegt wurde?
ggzone
3
Der Link zu Pinterest hilft nicht weiter, da sich der Inhalt hinter einer Login-Wand befindet.
2540625
4
Update 2017: Selbst wenn Sie sich bei Pinterest anmelden, ist der im OP beschriebene Overlay-Effekt nicht mehr vorhanden. Wenn Sie stattdessen auf ein Bild klicken, navigieren Sie einfach zu einer normalen Seite, auf der eine große Version des Bildes angezeigt wird.
Annabel

Antworten:

622

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; 
}
Fabrizio Calderan
quelle
6
Dies ist die richtige Antwort. Jemand sollte ein Häkchen setzen, da es korrekt ist.
Scoota P
64
Dies ist absolut korrekt, aber seien Sie gewarnt, es funktioniert nicht in mobilen Safari. Der Hintergrund wird weiter gescrollt und Ihre Überlagerung wird korrigiert.
A10s
20
Es funktioniert gut. Der scrollbare Ansichtsfenster-Container divmuss einen CSS-Stil position:fixedund einen vertikalen Überlauf haben, der scrollbar ist. Ich habe erfolgreich verwendet overflow-y:auto;und für iOS Momentum / Trägheits-Scrollen habe ich -webkit-overflow-scrolling:touch;das CSS hinzugefügt . Ich verwenden display:block;, width:100%;und height:100%;CSS ein ganzseitige Bildfenster zu haben.
Slink
10
Entschuldigung, ich verstehe das nicht. Einstellen des Körpers auf Überlauf: Verborgen deaktiviert nicht das Scrollen des elastischen Körpers auf meinem iPad iOS7. Also musste ich in meinem js hinzufügen: document.body.addEventListener ('touchmove', function (event) {event.preventDefault ();}, false); Dies verhindert leider, dass alle Elemente auch scrollbar sind. Habe bisher keine Lösung gefunden (ohne zusätzliche Plugins)
Garavani
22
Wenn der Benutzer den Körper bei Aktivierung des Overlays bereits nach unten gescrollt hat, springt der Körper beim Einstellen des Überlaufs nach oben: versteckt; Wie kann man das umgehen?
Björn Andersson
75

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;
}
am80l
quelle
106
Bei dieser Lösung wird der Körper aufgrund der festen Position automatisch zum Anfang Ihres Inhalts gescrollt. Dies kann für Ihre Benutzer störend sein.
Tzi
5
Ein weiteres Problem bei der Verwendung position:fixedist, dass die Größe meines Hauptkörpers geändert wurde. Vielleicht war es ein Konflikt mit anderen CSS, aber es overflow:hiddenist alles, was benötigt wurde
Dex
3
Dies bricht das
Fokusspringen,
@ Atav32 Klingt nach einem separaten Problem, Position und Überlauf sollten die Tab-Reihenfolge nicht beeinflussen.
Am80l
@ am80l Entschuldigung, mein vorheriger Kommentar war sehr vage: Die Tab-Reihenfolge funktioniert, aber der Bildschirm ruckelt, wenn Sie in iOS Safari durch Felder blättern ( stackoverflow.com/questions/31126330/… )
Atav32
44

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.

Lucia
quelle
5
coole Lösung, aber dann muss ich alle meine Inhalte in ein div verpacken, was ich nicht
vorhatte zu
2
Dies ist eine ideale Lösung. Wenn jemand Probleme damit hat, müssen Sie möglicherweise html, body { height: 100%; }(wie in der Demo) hinzufügen, damit dies ordnungsgemäß funktioniert.
John
4
@ user18490 Das Winkel- / Materialteil hat nichts damit zu tun, dass diese Lösung funktioniert.
Lucia
10
Dies unterbricht die UX von Mobilgeräten auf verschiedene Weise (z. B. Ausblenden der URL-Leiste, Erschwinglichkeit von Overscroll, ...) und sogar durch Drücken der Leertaste auf Desktops.
Endlich
2
Dies ist die robustere Option, macht die Dinge jedoch etwas komplizierter. Zum Beispiel funktionieren PageUp und PageDown beim Aktualisieren nicht. Alles, was die .offset()Werte für die Berechnung verwendet, wird durcheinander gebracht, etc ...
BlackPanther
42

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 .

Igor Alemasow
quelle
4
Ich bin den ganzen Weg gekommen, um Ihnen zu sagen, dass dies auf den neuesten Versionen von Chrome, Mozilla und Opera funktioniert. Hab eine wunderbare Zeit!
Wannabe JavaGeek
3
Jemand sollte ein Kopfgeld hinzufügen. Dies ist die richtige Lösung. Kein JavaScript erforderlich. :)
joseph.l.hunsaker
9
Das Problem bei dieser Lösung ist, dass sie nur funktioniert, wenn die Überlagerung scrollbar ist. Wenn Sie ein Modal haben und alles auf den Bildschirm passt, sodass sich kein Bildlauf im Inneren befindet, wird das Scrollen des Körpers nicht gestoppt. Das und es funktioniert auch überhaupt nicht in Safari :)
waterplea
1
Ich habe mich mit einer Kombination davon mit overflow-y: scroll(aus Ihrer Codepen-Demo) abgefunden. Der von @pokrishka angesprochene Punkt ist gültig, aber in meinem Fall ist es kein Problem. Auf jeden Fall frage ich mich, ob die Implementierungen der Browser dieses Detail in Zukunft abdecken werden. Ich habe festgestellt, dass in Firefox die Größe des Browsers so geändert wird, dass das Modal nicht auf den Bildschirm passt, und dann die Größe erneut geändert wird, damit diese Eigenschaft auch nach dem Ändern der Größe in voller Größe funktioniert (dh ein Bildlauf ist enthalten) - bis die Seite neu geladen wird , wenigstens.
März 2377
33

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>

Philipp Mitterer
quelle
Dies scheint mir die eleganteste Lösung zu sein. Ich weiß, dass Google die gleichen Tricks anwendet, um die Seite zu scrollen und Elemente häufig zu verschieben.
Forallepsilon
Dies ist die einzige Lösung, die für mich zu 100% richtig funktioniert hat. Ich wünschte, ich hätte diese Antwort früher gefunden.
user0103
31

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;
}
Francisco Hodge
quelle
Für iOS müssen Sie auchwidth: 100%; height: 100%;
Gavin
2
Dies behebt kein Problem, das auch in vielen anderen Lösungen für diese Frage auftritt. Wenn das Fenster bei geöffnetem Modal an einer anderen Stelle als am oberen Rand der Seite gescrollt wird, wird ein Bildlauf zum oberen Rand der Seite ausgeführt. Ich fand die Lösung von Philipp Mitterer hier die beste Option, die die meisten Fälle abdeckt.
CLL
1
Ich habe dieses Problem, von dem Sie sprechen, noch nie erlebt (entweder im Internet oder auf dem Handy). Könnten Sie den vollständigen Code (mit DOM) teilen, der in einer Geige oder einem JSBIN nicht funktioniert? Auf jeden Fall bin ich vorsichtig, Javascript-Problemumgehungen zu verwenden, um dieses Problem zu beheben.
Francisco Hodge
7

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 .

NGLN
quelle
1
Beste Lösung, echtes "out of the box" -Denken, nur nicht so gut formuliert.
Markieren Sie
Wenn der Körper nicht das Element ist, das gescrollt wird, werden die oberen Leisten auf dem Handy nicht nach oben verschoben, wenn Sie in die Seite scrollen.
Seph Reed
7

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; */
}
Weston
quelle
4

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

YarGnawh
quelle
Jup, das hat den Trick gemacht. Musste nur -webkit-overflow-scrolling:touch;für jeden scrollbaren Container hinzufügen , um Berührungsereignisse abzufangen.
Mati
Ich kann immer noch auf dem iPhone scrollen
Simone Zandara
@ SeniorSimoneZandara bin ich nicht. Dies funktioniert gut, um Hintergrund-Scroll zu verhindern
Godblessstrawberry
3

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.

黄 雨伞
quelle
3

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">
TheFullResolution
quelle
2

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

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");
}
Vic Seedoubleyew
quelle
1

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

Damir Kotoric
quelle
1

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

Gajus
quelle
1
Wenn Touch Action tatsächlich unter iOS funktioniert hat, ist das so. In diesem Fall wäre es nicht erforderlich, Ihre gesamte "App" in ein separates Div zu packen.
Powerbuoy
0

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

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!

Ashwin
quelle
-2

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();
Rakesh Chaudhari
quelle