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

Ich benutze showModalDialog für die Anzeige der Sekundärseite als modaler Dialog.

um die Bildlaufleisten des Hauptfensters auszublenden:

document.body.style.overflow = "hidden";

und beim Schließen des modalen Dialogs werden die Bildlaufleisten des Hauptfensters angezeigt:

document.body.style.overflow = "scroll";

um vom Dialog aus auf Elemente im Hauptfenster zuzugreifen:

parent.document.getElementById('dialog-close').click();

nur für alle, die auf der Suche nach showModalDialog :(nach Zeile 29 des ursprünglichen Codes)

document.getElementById('dialog-body').contentWindow.dialogArguments = arg;
document.body.style.overflow = "hidden";//****
document.getElementById('dialog-close').addEventListener('click', function(e) {
    e.preventDefault();
    document.body.style.overflow = "scroll";//****
    dialog.close();
});

Answer 2

Ich habe festgestellt, dass es nicht notwendig war, den Stil der Karosserie zu ändern.

Das Einzige, was wir brauchen, ist zu verhindern, dass das gesamte Dokument (html-Element) ein y-Scrolling hat.

Wir können eine Stilvorlage mit Javascript erstellen und zerstören, um dies zu tun. Hier ist, wie ich es tun:

https://jsfiddle.net/3os72ryk/

var scroll_style_element;

function disable_scrolling(){

  // Create a style sheet we will only use to disable scrolling :
  scroll_style_element = document.createElement('style');
  document.head.appendChild(scroll_style_element);
  const scroll_style_sheet = scroll_style_element.sheet;

  scroll_style_sheet.insertRule('html{height:100%;overflow-y:hidden;}', scroll_style_sheet.cssRules.length);
}

function enable_scrolling(){
  if( scroll_style_element ) document.head.removeChild(scroll_style_element);
}

Ich bin sehr daran interessiert zu erfahren, ob jemand etwas an diesem Ansatz auszusetzen hat, und bitte um einen Kommentar.

Answer 3

Eine andere Lösung:

body {
    overflow-y: scroll;
    width: 100%;
    margin: 0 auto;
}

Auf diese Weise haben Sie immer eine vertikale Bildlaufleiste, aber da die meisten meiner Inhalte länger sind als das Ansichtsfenster, ist dies für mich in Ordnung. Der Inhalt ist mit einem separaten div zentriert, aber ohne Einstellung Marge wieder in Körper mein Inhalt würde auf der linken Seite bleiben.

Dies sind die beiden Funktionen, mit denen ich mein Popup/Modal anzeige:

var popup_bodyTop = 0;
var popup_bodyLeft = 0;

function popupShow(id)
{
    $('#'+ id).effect('fade');
    $('#popup-overlay').effect('fade');

    // remember current scroll-position
    // because when setting/unsetting position: fixed to body
    // the body would scroll to 0,0
    popup_bodyLeft = $(document).scrollLeft();
    popup_bodyTop  = $(document).scrollTop();

    // invert position
    var x = - popup_bodyLeft;
    var y = - popup_bodyTop;

    $('body').css('position', 'fixed');
    $('body').css('top', y.toString() +'px');
    $('body').css('left', x.toString() +'px');
}

function popupHide(id)
{
    $('#'+ id).effect('fade');
    $('#popup-overlay').effect('fade');
    $('body').css('position', '');
    $('html, body').scrollTop(popup_bodyTop);
    $('html, body').scrollLeft(popup_bodyLeft);
}

Ergebnis: kein scrollbarer Hintergrund und keine Neupositionierung des Inhalts aufgrund der linken Bildlaufleiste. Getestet mit aktuellem FF, Chrome und IE 10.

Answer 4

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 5

Hier ist meine Lösung, um den Bildlauf zu stoppen (keine jQuery). Ich benutze es, um den Bildlauf zu deaktivieren, wenn das Seitenmenü erscheint.

<button onClick="noscroll()" style="position:fixed; padding: 8px 16px;">Disable/Enable scroll</button>
<script>
var noscroll_var;
function noscroll(){
  if(noscroll_var){
    document.getElementsByTagName("html")[0].style.overflowY = "";
    document.body.style.paddingRight = "0";
    noscroll_var = false
  }else{
    document.getElementsByTagName("html")[0].setAttribute('style', 'overflow-y: hidden !important');
    document.body.style.paddingRight = "17px";
    noscroll_var = true
  }
}/*noscroll()*/
</script>

<!-- Just to fill the page -->
<script>
  for(var i=0; i <= 80; i++){
    document.write(i + "<hr>")
  }
</script>

Ich habe 17px Padding-Right hinzugefügt, um das Verschwinden der Bildlaufleiste auszugleichen. Aber das ist auch problematisch, vor allem für mobile Browser. Gelöst, indem ich die Breite der Leiste nach este .

Alle zusammen in diesem Stift.