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

Die Lösung von galambalazs ist großartig! Sie hat bei mir sowohl in Chrome als auch in Firefox perfekt funktioniert. Und es kann auch erweitert werden, um jedes Standard-Ereignis aus dem Browser-Fenster zu verhindern. Nehmen wir an, du machst eine App auf der Leinwand. Sie könnten dies tun:

var events = {
  preventDefault: function(e) {
    e = e || window.event;
    if (e.preventDefault) e.preventDefault();
    e.returnValue = false;  
  },

  //spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36,
  //left: 37, up: 38, right: 39, down: 40
  keys: [32, 33, 34, 35, 36, 37, 38, 39, 40],
  keydown: function(e) {
    for (var i = events.keys.length; i--;) {
      if (e.keyCode === events.keys[i]) {
        events.preventDefault(e);
        return;
      }
    }
  },

  wheel: function(e) {
    events.preventDefault(e);
  },

  disable: function() {
    if (window.addEventListener) {
      window.addEventListener('DOMMouseScroll', events.wheel, false);
    }
    window.onmousewheel = document.onmousewheel = events.wheel;
    document.onkeydown = helpers.events.keydown;
  },

  enable: function() {
    if (window.removeEventListener) {
      window.removeEventListener('DOMMouseScroll', events.wheel, false);
    }
    window.onmousewheel = document.onmousewheel = document.onkeydown = null;  
  }
}

Und dann in Ihrer App, sagen wir, Sie werden Ihre eigenen Ereignisse verarbeiten, wie Maus, Tastatur, Touch-Events und so weiter... Sie könnten die Standard-Ereignisse deaktivieren, wenn die Maus in den Canvas geht, und sie wieder aktivieren, wenn die Maus herausgeht:

function setMouseEvents(canvas) {
  var useCapture = false;

  //Mouse enter event
  canvas.addEventListener('mouseenter', function(event) {
    events.disable();
  }, useCapture);

  //Mouse leave event
  canvas.addEventListener('mouseleave', function(event) {
    events.enable();
  }, useCapture);
}

Mit diesem Hack können Sie sogar das Rechtsklickmenü deaktivieren:

function disableRightClickMenu(canvas) {
  var my_gradient = canvas.context.createLinearGradient(0, 0, 0, 225);
  my_gradient.addColorStop(0, "white");
  my_gradient.addColorStop(1, "white");
  canvas.context.fillStyle = my_gradient;
  canvas.context.fillRect(0, 0, canvas.width, canvas.height);
  canvas.oncontextmenu = function() { return false; };
}

Answer 2

Sie können den Bildlauf der Leertaste blockieren und die Bildlaufleiste des Browsers ausblenden:

$(document).keydown(function(event) {
    if (event.keyCode == 32) {
        return false;

    }
});

document.documentElement.style.overflow = 'hidden';
document.body.scroll = 'no';

Answer 3

Ich fand diese Antwort in einem anderen sitio :

Blättern deaktivieren:

$( ".popup").live({
    popupbeforeposition: function(event, ui) {
    $("body").on("touchmove", false);
}
});

Nach dem Schließen des Popups lassen Sie den Bildlauf los:

$( ".popup" ).live({
    popupafterclose: function(event, ui) {
    $("body").unbind("touchmove");
}
});

Answer 4

Es gibt andere Lösung ¡!

Anstatt mehrere Ereignis-Listener zu verwenden und sie kaum hinzuzufügen, zu stoppen und auszuschalten, können Sie Hörer nur einmal hinzufügen mit Rückruf, bei dem Sie Veranstaltung in allen Funktionen teilen , rufen Sie preventDefault nur bei Bedarf auf usw. und implementieren Sie sogar ein eigenes Prioritätssystem für Ereignisse.

Answer 5

Ich habe einen besseren, aber fehleranfälligen Weg gefunden, der sdleihssirhc's Idee kombiniert:

window.onscroll = function() {
    window.scrollTo(window.scrollX, window.scrollY);
    //Or
    //window.scroll(window.scrollX, window.scrollY);
    //Or Fallback
    //window.scrollX=window.scrollX;
    //window.scrollY=window.scrollY;
};

Ich habe es nicht getestet, aber ich werde es später bearbeiten und euch allen Bescheid geben. Ich bin mir zu 85% sicher, dass es in den gängigen Browsern funktioniert.