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

CSS

  overflow-y: hidden
}

Javascript
``let body = document.querySelector('body');
if(condition)  {
 //disable scroll on the entire body
 body?.classList.add("disable-scroll");
} 
else {
 //to remove the class attrib
 body?.removeAttribute("class");
 //or to remove the disable-scroll class only
 body?.classList.remove("dissble-scroll");
}

Das ist viel besser als langer Code. leicht zu verstehen

Answer 2

Eine einfache Lösung, die bei mir funktioniert hat (vorübergehendes Deaktivieren des Fensterbildlaufs).

Basierend auf dieser Fiedel: http://jsfiddle.net/dh834zgw/1/

Das folgende Snippet (unter Verwendung von Jquery) deaktiviert das Scrollen des Fensters:

 var curScrollTop = $(window).scrollTop();
 $('html').toggleClass('noscroll').css('top', '-' + curScrollTop + 'px');

Und in Ihrem css:

html.noscroll{
    position: fixed;
    width: 100%;
    top:0;
    left: 0;
    height: 100%;
    overflow-y: scroll !important;
    z-index: 10;
 }

Wenn Sie nun das Modal entfernen, vergessen Sie nicht, die Klasse noscroll aus dem html-Tag zu entfernen:

$('html').toggleClass('noscroll');

Answer 3

Meine Meinung zu diesem Thema beinhaltet auch ein Problem mit der Körperbreite, da die Seite ein wenig zu tanzen scheint, wenn wir die Bildlaufleiste mit overflow = "hidden" . Der folgende Code funktioniert perfekt für mich, und basiert auf einem Angular-Ansatz.

element.bind('mouseenter', function() {
    var w = document.body.offsetWidth;
    document.body.style.overflow = 'hidden';
    document.body.style.width = w + 'px';
});

element.bind('mouseleave', function() {
    document.body.style.overflow = 'initial';
    document.body.style.width = 'auto';
});

Answer 4

Ich hatte ein ähnliches Animationsproblem auf mobilen Bildschirmen, aber nicht auf Laptops, wenn ich versuchte, ein Div mit dem Animate-Befehl von Jquery zu animieren. Also beschloss ich, einen Timer zu verwenden, der die Bildlaufposition des Fensters so häufig wiederherstellt, dass das Dokument mit bloßem Auge statisch erscheint. Diese Lösung funktionierte perfekt auf einem mobilen Gerät mit kleinem Bildschirm wie Samsung Galaxy-2 oder iphone-5.

Hauptlogik dieses Ansatzes : Der Timer zum Einstellen der Bildlaufposition des Fensters auf die ursprüngliche Bildlaufposition sollte vor dem Befehl jquery animate gestartet werden, und wenn die Animation abgeschlossen ist, müssen wir diesen Timer löschen ( original scroll position ist die Position kurz vor Beginn der Animation).

Zu meiner angenehmen Überraschung stellte ich fest dass das Dokument während der Dauer der Animation tatsächlich statisch erschien, wenn das Timer-Intervall 1 millisecond Das ist das, was ich erreichen wollte.

//get window scroll position prior to animation
//so we can keep this position during animation
var xPosition = window.scrollX || window.pageXOffset || document.body.scrollLeft;
var yPosition = window.scrollY || window.pageYOffset || document.body.scrollTop;

//NOTE:restoreTimer needs to be global variable
//start the restore timer
restoreTimer = setInterval(function() {
    window.scrollTo(xPosition, yPosition);
}, 1);

//animate the element emt
emt.animate({
    left: "toggle",
    top: "toggle",
    width: "toggle",
    height: "toggle"
}, 500, function() {
    //when animation completes, we stop the timer
    clearInterval(restoreTimer);
});

EINE ANDERE LÖSUNG, die funktioniert hat : Basierend auf der Antwort von Mohammad Anini unter diesem Beitrag zu aktivieren / deaktivieren Scrollen, fand ich auch, dass eine modifizierte Version des Codes wie unten funktioniert.

//get current scroll position
var xPosition = window.scrollX || window.pageXOffset || document.body.scrollLeft;
var yPosition = window.scrollY || window.pageYOffset || document.body.scrollTop;

//disable scrolling
window.onscroll = function() {
    window.scrollTo(xPosition, yPosition);
};

//animate and enable scrolling when animation is completed
emt.animate({
    left: "toggle",
    top: "toggle",
    width: "toggle",
    height: "toggle"
}, 500, function() {
    //enable scrolling when animation is done
    window.onscroll = function() {};
});

Answer 5

Die Aktivierung des folgenden CSS mit JavaScript wird helfen. Ich bin nicht so gut wie die anderen hier, aber das hat bei mir funktioniert.

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