js/css : Deaktivieren Sie die Bildlaufleiste, aber behalten Sie die Bildlaufposition bei

Question 1

Ich verwende den Jquery-Dialog, um ein Popup-Fenster oben auf einer Seite zu öffnen. Wenn ich das Dialogfeld öffne, möchte ich, dass das allgemeine Scrollen von Seiten deaktiviert wird. Dazu mache ich:

$('body').css({overflow:'hidden'});

wenn der Dialog geöffnet wird, und:

$('body').css({overflow:'auto'});

wenn der Dialog schließt.

Dies funktioniert, aber wenn die Bildlaufleiste entfernt wird, wandert der Inhalt im Hintergrund nach rechts und das Ergebnis ist nicht schön.

Ich habe eine andere Methode ausprobiert, indem ich eine CSS-Klasse “noscroll” wie folgt erstellt habe:

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

dann füge ich anstelle des vorherigen js-Codes diese Klasse zum Körper beim Öffnen/Schließen des Dialogs hinzu und entferne sie.

Jetzt funktioniert dies für die Bildlaufleiste und der Inhalt im Hintergrund bewegt sich nicht nach rechts, aber mit dieser Methode geht der Inhalt im Hintergrund wieder nach oben.

Im Grunde verschiebt Methode1 den Inhalt nach rechts und Methode2 bewegt den Inhalt zurück nach oben.

Kennt jemand eine Lösung dafür? Kein Scrollen für den Inhalt im Hintergrund, wenn der Dialog geöffnet wird, und keine Bewegung beim Deaktivieren des Scrollens …?

Question 2

Ich habe ein ziemlich einfaches Beispiel für meine Lösung gemacht.

http://jsfiddle.net/6eyJm/1/

Ihr Popup sollte sich in einer Box befinden

<div id="shadow">
<div id="popup">
    <a id='close' href="#">Close</a>
</div>

Dann legen Sie diese CSS auf de root div

#shadow{
    display: none;
    position: fixed;
    top:0;
    bottom: 0;
    width: 100%;
    height:100%;
    background-color: rgba(0,0,0,0.6);
}

Die feste Position ist wirklich wichtig, da Sie den weißen Rand nicht sehen möchten, es wird die volle Fensterbreite und nicht der Körper benötigt.

Dann gibt es noch den kleinen JS-Trick

$('#open').click(function(e){
    e.preventDefault()
    $('body').width($('body').width());
    $('body').css('overflow', 'hidden');
    $('#shadow').css('display', 'block');
})
$('#close').click(function(e){
    e.preventDefault()
    $('body, #shadow').removeAttr('style')
})

Das Ziel hier ist, die Körperbreite zu nehmen, bevor die Bildlaufleiste entfernt wird. Ihre Inhalte werden nicht verschoben.

Hoffe es hilft!

Entschuldigung für mein Englisch, nicht meine Muttersprache.

Question 3

Das Erinnern an den Offset sollte Ihr Popup in Schach halten;

JSfiddle

HTML

<div id="popupholder">
    <button id="close">Close me</button>
</div>


asd <br />asd <br />asd <br />asd <br />asd <br />
<button class="open">Popup</button>
<br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd<br />
<button class="open">Popup</button>
<br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />
<button class="open">Popup</button>
<br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd<br />
<button class="open">Popup</button>
<br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />

CSS

html, body {
    margin: 0px;
}

#popupholder {
    width: 100%;
    height: 100%;
    position: absolute;
    display: box;
    display: -webkit-box;
    display: -moz-box;
    background-color: rgba(0,0,0,0.75);
    display: none;
}

#close {
    display: block;
    height: 20px;
    margin: 75px auto 0px auto;
}

JavaScript

$(document).ready(function() {
    $('.open').click(function() {
        // Block scrolling
        $('body').css('overflow', 'hidden');

        // Show popup
        var offset = window.pageYOffset;
        //console.log(offset);
        $('#popupholder').css({
            'display': 'block',
            'top': offset + 'px'
        });
    });

    $('#close').click(function() {
        // Enable scrolling
        $('body').css('overflow', 'auto');

        // Hide popup
        $('#popupholder').css('display', 'none');
    });
});

Aus Sicherheitsgründen könnten Sie ein sehr hohes hinzufügen z-index zu deinem #popupholderaber das ist nicht wirklich relevant für die Frage.

Question 4

Ich hatte das gleiche Problem, dieses Repository hat mir geholfen kein scrollen

Question 5

Das ist die beste Lösung, die ich bisher bekommen habe. Und glauben Sie mir, ich habe alle anderen ausprobiert und das ist die beste und einfachste Lösung, die mir eingefallen ist. Es funktioniert großartig auf Windows-Gerätenwodurch die Seite von rechts verschoben wird, um Platz für die System-Bildlaufleiste zu haben, und IOS-Geräte die keinen Platz für ihre Bildlaufleisten in den Browsern benötigen. Wenn Sie dies verwenden, müssen Sie also keine Auffüllung auf der rechten Seite hinzufügen, damit die Seite nicht flackert, wenn Sie dies tun Verstecken Sie den Überlauf des Körpers oder HTML mit CSS.

Die Lösung ist ziemlich einfach, wenn man darüber nachdenkt. Die Idee ist, die zu geben window.scrollTop() genau dieselbe Position in dem Moment, in dem ein Popup geöffnet wird. Ändern Sie diese Position auch, wenn sich die Größe des Fensters ändert (da sich die Bildlaufposition ändert, sobald dies geschieht).

Auf geht’s…

Lassen Sie uns zuerst die Variable erstellen, die Sie darüber informiert, dass das Popup geöffnet ist, und es aufrufen stopWindowScroll. Wenn wir dies nicht tun, erhalten Sie einen Fehler einer nicht definierten Variable auf Ihrer Seite und setzen sie auf 0 – als nicht aktiv.

$(document).ready(function(){
    stopWindowScroll = 0;
});

Lassen Sie uns nun die offene Popup-Funktion erstellen, die eine beliebige Funktion in Ihrem Code sein kann, die jedes Popup auslöst, das Sie als Plugin oder Benutzerdefiniert verwenden. In diesem Fall handelt es sich um ein einfaches benutzerdefiniertes Popup mit einer einfachen Dokument-auf-Klick-Funktion.

$(document).on('click','.open-popup', function(){
    // Saving the scroll position once opening the popup.
    stopWindowScrollPosition = $(window).scrollTop();
    // Setting the stopWindowScroll to 1 to know the popup is open.
    stopWindowScroll = 1;
    // Displaying your popup.
    $('.your-popup').fadeIn(300);
});

Als Nächstes erstellen wir also die Popup-Close-Funktion, die ich wiederhole, jede Funktion sein kann, die Sie bereits erstellt haben oder in einem Plugin verwenden. Wichtig ist, dass wir diese 2 Funktionen brauchen, um die einzustellen stopWindowScroll Variable auf 1 oder 0, um zu wissen, wann sie geöffnet oder geschlossen ist.

$(document).on('click','.open-popup', function(){
    // Setting the stopWindowScroll to 0 to know the popup is closed.
    stopWindowScroll = 0;
    // Hiding your popup
    $('.your-popup').fadeOut(300);
});

Dann erstellen wir die Funktion window.scroll, damit wir das Scrollen einmal verhindern können stopWindowScroll oben erwähnt auf 1 gesetzt – als aktiv.

$(window).scroll(function(){
    if(stopWindowScroll == 1) {
         // Giving the window scrollTop() function the position on which
         // the popup was opened, this way it will stay in its place.
         $(window).scrollTop(stopWindowScrollPosition);
    }
});

Das ist es. Dafür ist kein CSS erforderlich, außer Ihren eigenen Stilen für die Seite. Das funktionierte wie ein Zauber für mich und ich hoffe, es hilft Ihnen und anderen.

Hier ist ein funktionierendes Beispiel für JSFiddle:

JS-Fiddle-Beispiel

Lassen Sie mich wissen, ob dies geholfen hat. Grüße.

Question 6

Sie können die Differenz zwischen der Körperbreite vor und nach dem ausgeblendeten Überlauf berechnen und als Polsterung direkt auf den Körper anwenden

var bodyStartW = $("body").width();
$("body").css("overflow-y" , "hidden");
var bodyEndW = $("body").width();
var bodyMarginL = bodyEndW - bodyStartW;
$("body").css("padding-right" , bodyMarginL);

In Safari hatten Sie den gleichen Trick für das “html”-Tag und margin-right statt padding-right

Question 7

Ich verwende diese beiden Funktionen für den gleichen Zweck:

function enableBodyScroll() {
  if (document.readyState === 'complete') {
    document.body.style.position = '';
    document.body.style.overflowY = '';

    if (document.body.style.marginTop) {
      const scrollTop = -parseInt(document.body.style.marginTop, 10);
      document.body.style.marginTop = '';
      window.scrollTo(window.pageXOffset, scrollTop);
    }
  } else {
    window.addEventListener('load', enableBodyScroll);
  }
}

function disableBodyScroll({ savePosition = false } = {}) {
  if (document.readyState === 'complete') {
    if (document.body.scrollHeight > window.innerHeight) {
      if (savePosition) document.body.style.marginTop = `-${window.pageYOffset}px`;
      document.body.style.position = 'fixed';
      document.body.style.overflowY = 'scroll';
    }
  } else {
    window.addEventListener('load', () => disableBodyScroll({ savePosition }));
  }
}

Wie es funktioniert:

Wenn Sie das Scrollen mit Speichern der aktuellen Position deaktivieren möchten, laufen Sie disableBodyScroll({ savePosition: true }).
Die Funktion überprüft, ob die Seite geladen wurde oder nicht (weil der Benutzer während des Ladens das Öffnen des Dialogs auslösen kann).

Wenn die Seite geladen ist, speichert sie die aktuelle Scrollposition durch die Einstellung margin-top an bodydann setzt es ein position: fixed; overflow-y: scroll darauf, um die Bildlaufleiste zu entfernen.
Wenn die Seite nicht geladen wird, fügt sie einen Ereignis-Listener hinzu, der ausgeführt wird (3.), wenn die Seite geladen wird.

Für das Aktivieren des Scrollens ist alles gleich, aber die Funktion entfernt Stile, anstatt sie festzulegen.

Quelle des Codes: https://github.com/funbox/diamonds/blob/master/lib/body-scroll.ts