Ich versuche, die HTML / Body-Bildlaufleiste des übergeordneten Elements zu deaktivieren, während ich einen Leuchtkasten verwende. Das Hauptwort hier ist deaktivieren . Ich möchte es nicht mit verstecken overflow: hidden;.

Der Grund dafür ist, overflow: hiddendass die Site springt und den Bereich einnimmt, in dem sich die Schriftrolle befand.

Ich möchte wissen, ob es möglich ist, eine Bildlaufleiste zu deaktivieren, während sie noch angezeigt wird.

Wenn die Seite unter der Überlagerung oben "fixiert" werden kann, können Sie beim Öffnen der Überlagerung festlegen

body { position: fixed; overflow-y:scroll }

Sie sollten immer noch die rechte Bildlaufleiste sehen, aber der Inhalt kann nicht gescrollt werden. Wenn Sie die Überlagerung schließen, setzen Sie diese Eigenschaften einfach mit zurück

body { position: static; overflow-y:auto }

Ich habe diesen Weg nur vorgeschlagen, weil Sie kein Bildlaufereignis ändern müssen

Aktualisieren

Sie können auch eine leichte Verbesserung vornehmen: Wenn Sie die document.documentElement.scrollTopEigenschaft kurz vor dem Öffnen der Ebene über Javascript erhalten, können Sie diesen Wert dynamisch als topEigenschaft des Body-Elements zuweisen : Bei diesem Ansatz bleibt die Seite an ihrer Stelle, unabhängig davon, ob Sie Sie sind oben oder wenn Sie bereits gescrollt haben.

Css

.noscroll { position: fixed; overflow-y:scroll }

JS

$('body').css('top', -(document.documentElement.scrollTop) + 'px')
         .addClass('noscroll');

Vier kleine Ergänzungen zur ausgewählten Lösung:

1. Wenden Sie 'noscroll' auf HTML anstatt auf body an, um doppelte Bildlaufleisten im IE zu vermeiden
2. Um zu überprüfen , ob es tatsächlich eine Scroll - Leiste ist , bevor die ‚noscroll‘ Klasse hinzufügen. Andernfalls springt die Site auch durch die neue nicht scrollende Bildlaufleiste.
3. Damit ein mögliches scrollTop erhalten bleibt, damit nicht die gesamte Seite nach oben zurückkehrt (wie bei Fabrizios Update, aber Sie müssen den Wert abrufen, bevor Sie die Klasse 'noscroll' hinzufügen).
4. Nicht alle Browser behandeln scrollTop auf die gleiche Weise wie unter http://help.dottoro.com/ljnvjiow.php dokumentiert

Komplettlösung, die für die meisten Browser zu funktionieren scheint:

CSS

html.noscroll {
    position: fixed; 
    overflow-y: scroll;
    width: 100%;
}

Bildlauf deaktivieren

if ($(document).height() > $(window).height()) {
     var scrollTop = ($('html').scrollTop()) ? $('html').scrollTop() : $('body').scrollTop(); // Works for Chrome, Firefox, IE...
     $('html').addClass('noscroll').css('top',-scrollTop);         
}

Bildlauf aktivieren

var scrollTop = parseInt($('html').css('top'));
$('html').removeClass('noscroll');
$('html,body').scrollTop(-scrollTop);

Vielen Dank an Fabrizio und Dejan, die mich auf den richtigen Weg gebracht haben, und an Brodingo für die Lösung der doppelten Bildlaufleiste

Mit jQuery inklusive:

deaktivieren

$.fn.disableScroll = function() {
    window.oldScrollPos = $(window).scrollTop();

    $(window).on('scroll.scrolldisabler',function ( event ) {
       $(window).scrollTop( window.oldScrollPos );
       event.preventDefault();
    });
};

aktivieren

$.fn.enableScroll = function() {
    $(window).off('scroll.scrolldisabler');
};

Verwendung

//disable
$("#selector").disableScroll();
//enable
$("#selector").enableScroll();

Ich bin der OP

Mit Hilfe der Antwort von fcalderan konnte ich eine Lösung finden. Ich lasse meine Lösung hier, da sie Klarheit in die Verwendung bringt und ein sehr wichtiges Detail hinzufügt.width: 100%;

Ich füge diese Klasse hinzu

body.noscroll
{
    position: fixed; 
    overflow-y: scroll;
    width: 100%;
}

Das hat bei mir funktioniert und ich habe Fancyapp verwendet.

Das hat bei mir sehr gut funktioniert ....

// disable scrolling
$('body').bind('mousewheel touchmove', lockScroll);

// enable scrolling
$('body').unbind('mousewheel touchmove', lockScroll);


// lock window scrolling
function lockScroll(e) {
    e.preventDefault();
}

Umschließen Sie diese beiden Codezeilen einfach mit dem, was Sie entscheiden, wenn Sie das Scrollen sperren möchten.

z.B

$('button').on('click', function() {
     $('body').bind('mousewheel touchmove', lockScroll);
});

Sie können das Bildlaufereignis nicht deaktivieren, aber Sie können die zugehörigen Aktionen deaktivieren, die zu einem Bildlauf führen, z. B. Mausrad und Touchmove:

$('body').on('mousewheel touchmove', function(e) {
      e.preventDefault();
});

Sie können die Bildlaufleiste des Körpers mit ausblenden overflow: hiddenund gleichzeitig einen Rand festlegen, damit der Inhalt nicht springt:

let marginRightPx = 0;
if(window.getComputedStyle) {
    let bodyStyle = window.getComputedStyle(document.body);
    if(bodyStyle) {
        marginRightPx = parseInt(bodyStyle.marginRight, 10);
    }
}

let scrollbarWidthPx = window.innerWidth - document.body.clientWidth;
Object.assign(document.body.style, {
    overflow: 'hidden',
    marginRight: `${marginRightPx + scrollbarWidthPx}px`
});

Und dann können Sie der Seite eine deaktivierte Bildlaufleiste hinzufügen, um die Lücke zu füllen:

textarea {
  overflow-y: scroll;
  overflow-x: hidden;
  width: 11px;
  outline: none;
  resize: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  border: 0;
}

<textarea></textarea>

Genau das habe ich für meine eigene Lightbox-Implementierung getan. Scheint bisher gut zu funktionieren.

Dies ist die Lösung, mit der wir uns entschieden haben. Speichern Sie einfach die Bildlaufposition, wenn das Overlay geöffnet wird, scrollen Sie jedes Mal, wenn der Benutzer versucht hat, die Seite zu scrollen, zur gespeicherten Position zurück und schalten Sie den Listener aus, wenn das Overlay geschlossen wird.

Es ist ein bisschen nervös im IE, funktioniert aber wie ein Zauber in Firefox / Chrome.

var body = $("body"),
  overlay = $("#overlay"),
  overlayShown = false,
  overlayScrollListener = null,
  overlaySavedScrollTop = 0,
  overlaySavedScrollLeft = 0;

function showOverlay() {
  overlayShown = true;

  // Show overlay
  overlay.addClass("overlay-shown");

  // Save scroll position
  overlaySavedScrollTop = body.scrollTop();
  overlaySavedScrollLeft = body.scrollLeft();

  // Listen for scroll event
  overlayScrollListener = body.scroll(function() {
    // Scroll back to saved position
    body.scrollTop(overlaySavedScrollTop);
    body.scrollLeft(overlaySavedScrollLeft);
  });
}

function hideOverlay() {
  overlayShown = false;

  // Hide overlay
  overlay.removeClass("overlay-shown");

  // Turn scroll listener off
  if (overlayScrollListener) {
    overlayScrollListener.off();
    overlayScrollListener = null;
  }
}

// Click toggles overlay
$(window).click(function() {
  if (!overlayShown) {
    showOverlay();
  } else {
    hideOverlay();
  }
});

/* Required */
html, body { margin: 0; padding: 0; height: 100%; background: #fff; }
html { overflow: hidden; }
body { overflow-y: scroll; }

/* Just for looks */
.spacer { height: 300%; background: orange; background: linear-gradient(#ff0, #f0f); }
.overlay { position: fixed; top: 20px; bottom: 20px; left: 20px; right: 20px; z-index: -1; background: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, .3); overflow: auto; }
.overlay .spacer { background: linear-gradient(#88f, #0ff); }
.overlay-shown { z-index: 1; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<h1>Top of page</h1>
<p>Click to toggle overlay. (This is only scrollable when overlay is <em>not</em> open.)</p>
<div class="spacer"></div>
<h1>Bottom of page</h1>
<div id="overlay" class="overlay">
  <h1>Top of overlay</h1>
  <p>Click to toggle overlay. (Containing page is no longer scrollable, but this is.)</p>
  <div class="spacer"></div>
  <h1>Bottom of overlay</h1>
</div>

Ich hatte ein ähnliches Problem: Ein Menü auf der linken Seite, das, wenn es angezeigt wird, das Scrollen verhindert. Sobald die Höhe auf 100 VH eingestellt war, verschwand die Bildlaufleiste und der Inhalt ruckte nach rechts.

Wenn es Ihnen also nichts ausmacht, die Bildlaufleiste aktiviert zu lassen (aber das Fenster auf die volle Höhe einzustellen, damit es nirgendwo hinrollt), können Sie auch einen winzigen unteren Rand festlegen, in dem die Bildlaufleisten angezeigt werden:

body {
    height: 100vh;
    overflow: hidden;
    margin: 0 0 1px;
}

Sie können den Überlauf beibehalten: ausgeblendet, aber die Bildlaufposition manuell verwalten:

Vor dem Anzeigen die tatsächliche Bildlaufposition verfolgen:

var scroll = [$(document).scrollTop(),$(document).scrollLeft()];
//show your lightbox and then reapply scroll position
$(document).scrollTop(scroll[0]).scrollLeft(scroll[1]);

es sollte funktionieren

Eine grobe, aber funktionierende Methode besteht darin, den Bildlauf nach oben zu erzwingen und so das Scrollen effektiv zu deaktivieren:

var _stopScroll = false;
window.onload = function(event) {
    document.onscroll = function(ev) {
        if (_stopScroll) {
            document.body.scrollTop = "0px";
        }
    }
};

Wenn Sie den Leuchtkasten öffnen, heben Sie die Flagge und senken Sie die Flagge, wenn Sie sie schließen.

Live-Testfall .

Ich halte mich gerne an die Methode "Überlauf: Verborgen" und füge einfach das Auffüllen rechts hinzu, das der Breite der Bildlaufleiste entspricht.

Holen Sie sich die Funktion zur Breite der Bildlaufleiste nach lostsource .

function getScrollbarWidth() {
    var outer = document.createElement("div");
    outer.style.visibility = "hidden";
    outer.style.width = "100px";
    outer.style.msOverflowStyle = "scrollbar"; // needed for WinJS apps

    document.body.appendChild(outer);

    var widthNoScroll = outer.offsetWidth;
    // force scrollbars
    outer.style.overflow = "scroll";

    // add innerdiv
    var inner = document.createElement("div");
    inner.style.width = "100%";
    outer.appendChild(inner);        

    var widthWithScroll = inner.offsetWidth;

    // remove divs
    outer.parentNode.removeChild(outer);

    return widthNoScroll - widthWithScroll;
}

Wenn Sie das Overlay anzeigen, fügen Sie HTML die Klasse "noscroll" hinzu und fügen Sie dem Text das Auffüllrecht hinzu:

$(html).addClass("noscroll");
$(body).css("paddingRight", getScrollbarWidth() + "px");

Entfernen Sie beim Ausblenden die Klasse und die Polsterung:

$(html).removeClass("noscroll");
$(body).css("paddingRight", 0);

Der Noscroll-Stil ist genau das:

.noscroll { overflow: hidden; }

Beachten Sie, dass Sie, wenn Sie Elemente mit der Position: fest haben, die Auffüllung auch diesen Elementen hinzufügen müssen.

<div id="lightbox">befindet sich innerhalb des <body>Elements. Wenn Sie also durch den Leuchtkasten scrollen, scrollen Sie auch durch den Körper. Die Lösung besteht darin, das <body>Element nicht über 100% zu erweitern, den langen Inhalt in einem anderen divElement zu platzieren und diesem divElement bei Bedarf eine Bildlaufleiste hinzuzufügen overflow: auto.

html {
  height: 100%
}
body {
  margin: 0;
  height: 100%
}
#content {
  height: 100%;
  overflow: auto;
}
#lightbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

<html>
  <body>
    <div id="content">much content</div>
    <div id="lightbox">lightbox<div>
  </body>
</html>

Das Scrollen über den Leuchtkasten (und auch den body) hat keine Auswirkung, da der Körper nicht länger als 100% der Bildschirmhöhe ist.

Alle Modal / Lightbox-Javascript-basierten Systeme verwenden einen Überlauf, wenn die Modal / Lightbox auf einem HTML-Tag oder einem Body-Tag angezeigt wird.

Wenn der Leuchtkasten angezeigt wird, drücken die js einen Überlauf, der auf HTML oder Body-Tag verborgen ist. Wenn der Leuchtkasten ausgeblendet ist, entfernen einige den ausgeblendeten anderen und drücken einen automatischen Überlauf auf HTML oder Body-Tag.

Entwickler, die auf einem Mac arbeiten, sehen das Problem der Bildlaufleiste nicht.

Ersetzen Sie einfach das Versteckte durch ein Nicht-Set, damit der Inhalt nicht unter das Modal des Entfernens der Bildlaufleiste rutscht.

Leuchtkasten öffnen / zeigen:

<html style="overflow: unset;"></html>

Leuchtkasten schließen / verstecken:

<html style="overflow: auto;"></html>

Wenn die Seite unter der Überlagerung oben "fixiert" werden kann, können Sie beim Öffnen der Überlagerung festlegen

.disableScroll { position: fixed; overflow-y:scroll }

Wenn Sie diese Klasse für den scrollbaren Körper bereitstellen, sollte die rechte Bildlaufleiste weiterhin angezeigt werden, der Inhalt ist jedoch nicht scrollbar.

Um die Position der Seite beizubehalten, führen Sie dies in jquery aus

$('body').css('top', - ($(window).scrollTop()) + 'px').addClass('disableScroll');

Wenn Sie die Überlagerung schließen, setzen Sie diese Eigenschaften einfach mit zurück

var top = $('body').position().top;
$('body').removeClass('disableScroll').css('top', 0).scrollTop(Math.abs(top));

Ich habe diesen Weg nur vorgeschlagen, weil Sie kein Bildlaufereignis ändern müssen

Dadurch wird verhindert, dass das Ansichtsfenster nach oben springt, indem die Bildlaufposition gespeichert und beim Aktivieren des Bildlaufs wiederhergestellt wird.

CSS

.no-scroll{
  position: fixed; 
  width:100%;
  min-height:100vh;
  top:0;
  left:0;
  overflow-y:scroll!important;
}

JS

var scrollTopPostion = 0;

function scroll_pause(){
  scrollTopPostion = $(window).scrollTop();
  $("body").addClass("no-scroll").css({"top":-1*scrollTopPostion+"px"});
}

function scroll_resume(){
  $("body").removeClass("no-scroll").removeAttr("style");
  $(window).scrollTop(scrollTopPostion);
}

Jetzt müssen Sie nur noch die Funktionen aufrufen

$(document).on("click","#DISABLEelementID",function(){
   scroll_pause();
});

$(document).on("click","#ENABLEelementID",function(){
   scroll_resume();
});

Sie können es mit Javascript tun:

// Classic JS
window.onscroll = function(ev) {
  ev.preventDefault();
}

// jQuery
$(window).scroll(function(ev) {
  ev.preventDefault();
}

Deaktivieren Sie es dann, wenn Ihr Leuchtkasten geschlossen ist.

Wenn Ihr Leuchtkasten jedoch eine Bildlaufleiste enthält, können Sie nicht scrollen, solange er geöffnet ist. Dies liegt daran, dass windowbeide bodyund enthalten #lightbox. Sie müssen also eine Architektur wie die folgende verwenden:

<body>
  <div id="global"></div>
  <div id="lightbox"></div>
</body>

Und dann wenden Sie die onscrollVeranstaltung nur auf #global.