Comment désactiver le défilement temporairement?

Question

J’utilise le plugin jQuery scrollTo et voudrais savoir si il est en quelque sorte possible de désactiver temporairement le défilement sur l’élément de fenêtre par le biais de Javascript ? La raison pour laquelle que je voudrais désactiver le défilement, c’est que lorsque vous faites défiler tandis que scrollTo anime, ça devient vraiment moche  ;)

Bien sûr, je pourrais faire un `` et puis mettre le dos à l’automobile lorsque l’animation s’arrête, mais il serait mieux si la barre de défilement était encore voir la mais inactif.

Answer 1

Le `` événement ne peut pas être annulé. Vous pouvez Annuler 2 choses cependant : défilement de la souris et les touches associées à défilement.

[Démonstration de travail]

Answer 2

Le faire en ajoutant simplement une classe à l’organisme :

Ajoutez la classe puis retirez lorsque vous souhaitez réactiver le défilement, testé dans IE, FF, Safari et Chrome.

---

Pour les appareils mobiles, vous devrez gérer le `` événement :

Et unbind pour réactiver le défilement. Testé en iOS6 et Android 2.3.3

Answer 3

Voici un moyen vraiment de base pour le faire :

C’est le genre de jumpy dans IE6.

Answer 4

La solution suivante est basique mais pur JavaScript (pas de jQuery) :

Answer 5

Cette solution permettra de maintenir la position de défilement actuelle, tandis que le défilement est désactivé, contrairement à certains qui sautent à l'utilisateur de retourner vers le haut.

Il est basé sur galambalazs de réponse, mais avec un support pour les périphériques tactiles, et reconstruit comme un seul objet.

J'ai aussi roulé en un plugin jQuery.

/* UserScrollDisabler 
 *
 * Requires: jQuery
 * 
 * Example usage
 * var disabler = new UserScrollDisabler();
 * disabler.disable_scrolling(); // disables user triggered scroll events
 * disabler.enable_scrolling(); // enables user triggered scroll events again
 */

var UserScrollDisabler = function() {

  // spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
  // left: 37, up: 38, right: 39, down: 40
  this.scrollEventKeys = [32, 33, 34, 35, 36, 37, 38, 39, 40];
  this.$window = $(window);
  this.$document = $(document);

};
UserScrollDisabler.prototype = {

  disable_scrolling : function() {
    var t = this;
    t.$window.on("mousewheel.UserScrollDisabler DOMMouseScroll.UserScrollDisabler", this._handleWheel);
    t.$document.on("mousewheel.UserScrollDisabler touchmove.UserScrollDisabler", this._handleWheel);
    t.$document.on("keydown.UserScrollDisabler", function(event) {
      t._handleKeydown.call(t, event);
    });
  },

  enable_scrolling : function() {
    var t = this;
    t.$window.off(".UserScrollDisabler");
    t.$document.off(".UserScrollDisabler");
  },

  _handleKeydown : function(event) {
    for (var i = 0; i < this.scrollEventKeys.length; i++) {
      if (event.keyCode === this.scrollEventKeys[i]) {
        event.preventDefault();
        return;
      }
    }
  },

  _handleWheel : function(event) {
    event.preventDefault();
  }

};


var disabler = new UserScrollDisabler();
var disabled = false;
var $status = $("#status");

$("button").on("click", function() {
  if(disabled) {
    disabler.enable_scrolling();
    disabled = false;
    $status.html("Scrolling is enabled");
  } else {
    disabler.disable_scrolling();
    disabled = true;
    $status.html("Scrolling is disabled");
  }
});

div {
  /* just something visible to test scrolling */
  height: 60px;
  margin: 0 0 1px;
  background: #ccc;
  font-family: monospace;
  padding: 4px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>Toggle Scrolling</button>
<div id="status">Scrolling is enabled</div>
<div>Try clicking in this iframe and using mousewheel, arrow keys, spacebar, page down etc</div>
<div></div><div></div><div></div><div></div>