Wie kann man den Bildlauf vorübergehend deaktivieren?

Question

Ich benutze das scrollTo jQuery-Plugin und würde gerne wissen, ob es irgendwie möglich ist, das Scrollen auf dem Fenster-Element durch Javascript vorübergehend zu deaktivieren? Der Grund, warum ich das Scrollen deaktivieren möchte, ist, dass, wenn Sie scrollen, während scrollTo animiert wird, wird es wirklich hässlich ;)

Natürlich könnte ich eine $("body").css("overflow", "hidden"); und dann wieder auf Auto stellen, wenn die Animation aufhört, aber es wäre besser, wenn die Bildlaufleiste weiterhin sichtbar, aber inaktiv wäre.

Answer 1

Das ist die einfachste Methode:

$("body").css("overflow", "hidden"); // Remove the scroll bar temporarily

Um es rückgängig zu machen:

$("body").css("overflow", "auto");

Einfach zu implementieren, aber der einzige Nachteil ist:

• Die Seite springt ein wenig nach links, wenn sie mittig (horizontal) ausgerichtet ist.

Dies ist darauf zurückzuführen, dass die Bildlaufleiste entfernt wurde und das Ansichtsfenster etwas breiter geworden ist.

Answer 2

Die Ereignisse abzusagen, wie in der akzeptierten Antwort, ist meiner Meinung nach eine schreckliche Methode :/

Stattdessen habe ich position: fixed; top: -scrollTop(); unten.

Demo: https://jsfiddle.net/w9w9hthy/5/

Von meinem jQuery Popup-Projekt: https://github.com/seahorsepip/jPopup

//Freeze page content scrolling
function freeze() {
    if($("html").css("position") != "fixed") {
        var top = $("html").scrollTop() ? $("html").scrollTop() : $("body").scrollTop();
        if(window.innerWidth > $("html").width()) {
            $("html").css("overflow-y", "scroll");
        }
        $("html").css({"width": "100%", "height": "100%", "position": "fixed", "top": -top});
    }
}

//Unfreeze page content scrolling
function unfreeze() {
    if($("html").css("position") == "fixed") {
        $("html").css("position", "static");
        $("html, body").scrollTop(-parseInt($("html").css("top")));
        $("html").css({"position": "", "width": "", "height": "", "top": "", "overflow-y": ""});
    }
}

Dieser Code berücksichtigt Breite, Höhe, Bildlaufleisten und Seitensprünge.

Mögliche Probleme mit obigem Code behoben:

• Breite, bei fester Einstellung der Position kann die Breite des HTML-Elements kleiner als 100% sein
• Höhe, wie oben
• Scrollbar, wenn die Position fixiert wird, hat der Seiteninhalt keine Scrollbar mehr, auch wenn er vorher eine Scrollbar hatte, was zu einem horizontalen Seitensprung führt
• pagejump, wenn die Position fest eingestellt ist, ist scrollTop nicht mehr wirksam, was zu einem vertikalen Pagejump führt

Wenn jemand irgendwelche Verbesserungen zu den oben genannten Seite einfrieren / unfreeze Code lassen Sie mich wissen, so kann ich diese Verbesserungen zu meinem Projekt hinzufügen.

Answer 3

Schalten Sie den OverflowY mit einer Javascript-Funktion um, während Sie gleichzeitig die Sichtbarkeit Ihres mobilen Menüs umschalten. Zum Beispiel so:

function handleClickMobileMenu() {
  document.body.style.overflowY = isMobileMenuOpen ? "hidden" : "scroll";
  //...
}

Rufen Sie die Funktion auf, wenn Sie das mobile Menü ein- und ausschalten. Der beste Anwendungsfall ist, wenn Ihr mobiles Menü den gesamten Viewport-Bereich einnimmt.

Answer 4

Wie wäre es damit? (Wenn Sie jQuery verwenden)

var $window = $(window);
var $body = $(window.document.body);

window.onscroll = function() {
    var overlay = $body.children(".ui-widget-overlay").first();

    // Check if the overlay is visible and restore the previous scroll state
    if (overlay.is(":visible")) {
        var scrollPos = $body.data("scroll-pos") || { x: 0, y: 0 };
        window.scrollTo(scrollPos.x, scrollPos.y);
    }
    else {
        // Just store the scroll state
        $body.data("scroll-pos", { x: $window.scrollLeft(), y: $window.scrollTop() });
    }
};

Answer 5

Aufbauend auf der Antwort von Cheyenne Forbes und einer Antwort, die ich hier über fcalderan gefunden habe: Nur die Schriftrolle deaktivieren, nicht ausblenden? und um Hallodoms Problem mit dem Verschwinden der Bildlaufleiste zu beheben

CSS:

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

JS:

whatever.onclick = function(){
    $('body').addClass('preventscroll');
}
whatevertoclose.onclick = function(){
    $('body').removeClass('preventscroll');
}

Dieser Code springt zwar an den Anfang der Seite, aber ich glaube, dass der Code von fcalderan eine Lösung bietet.