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 habe das gleiche Problem. Im Folgenden wird beschrieben, wie ich damit umgehe.

/* file.js */
var body = document.getElementsByTagName('body')[0];
//if window dont scroll
body.classList.add("no-scroll");
//if window scroll
body.classList.remove("no-scroll");

/* file.css */
.no-scroll{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

Ich hoffe, das hilft.

Answer 2

Ich verwende diesen einfachen Trick hier:

.no-scroll{
  overflow: hidden;
}

let toggle_scrolling_state = () => {
   element.classList.toggle("no-scroll");
}

und rufen Sie dann die Funktion auf, wenn Sie den Bildlauf bei einem Ereignis anhalten wollen oder ...

Answer 3

Ich habe ein ähnliches Problem auf Touch-Geräten. Das Hinzufügen von "touch-action: none" zum Element löste das Problem.

Für weitere Informationen. Sehen Sie sich das an:-

https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

Answer 4

Ich weiß, dass dies eine alte Frage ist, aber ich musste etwas sehr Ähnliches tun, und nachdem ich einige Zeit nach einer Antwort gesucht und verschiedene Ansätze ausprobiert hatte, habe ich schließlich eine sehr einfache Lösung gefunden.

Mein Problem war sehr ähnlich, fast identisch, der einzige Unterschied ist, dass ich nicht tatsächlich die Bildlaufleiste zeigen - ich musste nur sicherstellen, dass seine Breite noch verwendet werden würde, so dass die Breite der Seite nicht ändern würde, während mein Overlay angezeigt wurde.

Wenn ich anfange, mein Overlay in den Bildschirm zu schieben, tue ich das:

$('body').addClass('stop-scrolling').css('margin-right', 8);

und nachdem ich mein Overlay vom Bildschirm geschoben habe, tue ich das:

$('body').removeClass('stop-scrolling').css('margin-right', 0);

WICHTIG! dies funktioniert perfekt, weil mein Overlay positioniert ist absolute , right: 0px wenn visible .

Answer 5

Dieser Code funktioniert bei Chrom 56 und weiter (die ursprüngliche Antwort funktioniert auf Chrome nicht mehr).

Verwenden Sie DomUtils.enableScroll() um das Blättern zu aktivieren.

Verwenden Sie DomUtils.disableScroll() um das Blättern zu deaktivieren.

class DomUtils {
  // left: 37, up: 38, right: 39, down: 40,
  // spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
  static keys = { 37: 1, 38: 1, 39: 1, 40: 1 };

  static preventDefault(e) {
    e = e || window.event;
    if (e.preventDefault) e.preventDefault();
    e.returnValue = false;
  }

  static preventDefaultForScrollKeys(e) {
    if (DomUtils.keys[e.keyCode]) {
      DomUtils.preventDefault(e);
      return false;
    }
  }

  static disableScroll() {
    document.addEventListener('wheel', DomUtils.preventDefault, {
      passive: false,
    }); // Disable scrolling in Chrome
    document.addEventListener('keydown', DomUtils.preventDefaultForScrollKeys, {
      passive: false,
    });
  }

  static enableScroll() {
    document.removeEventListener('wheel', DomUtils.preventDefault, {
      passive: false,
    }); // Enable scrolling in Chrome
    document.removeEventListener(
      'keydown',
      DomUtils.preventDefaultForScrollKeys,
      {
        passive: false,
      }
    ); // Enable scrolling in Chrome
  }
}