Comment empêcher un navigateur de revenir en arrière dans l'historique lors du défilement horizontal?

Comment peut-on désactiver l'un des navigateurs modernes fonctionnalité par défaut à l'aide de JQuery ou Natif JS pour aller vers l'arrière ou vers l'avant en cas de défilement horizontal?

Cela se produit généralement lorsque vous utilisez un trackpad et quand défile à la fin ou au début d'une div scrollable.

source d'informationauteur Steve Chan

  1. 19
    history.pushState(null, null, location.href);
window.onpopstate = function(event) {
    history.go(1);
};

    Démo: http://jsfiddle.net/DerekL/RgDBQ/show/

    Vous ne serez pas en mesure de revenir à la précédente, page web, sauf si vous spammez la touche retour ou maintenez le bouton de retour et choisissez l'entrée précédente.

    Remarque: onpopstate (ou de l'événement onbeforeunload) ne semble pas fonctionner sur iOS.

  2. 7

    Alors j'ai pensé que depuis que j'ai créé une application web, pourquoi ne pas demander à l'utilisateur pour toutes les modifications non enregistrées qui s'en remet à l'utilisateur de perdre toutes les modifications non enregistrées ou qui se retrouvent sur la page précédente ou suivante dans l'historique du navigateur.

    Voici la solution si quelqu'un vient sur ce problème comme je l'ai fait:

    window.onbeforeunload = function(e) {
    return 'Ask user a page leaving question here';
};
  3. 4

    Si vous êtes sur un mac, cela est causé par le patin de chenille Gestes.

    System Preferences -> Trackpad -> More Gestures.

    Pas le JS solution que vous cherchez, mais si vous voulez juste pour l'empêcher de vous-même, vous pouvez désactiver cette fonction.

  4. 2

    Fonctionne dans Chrome et Safari (j'.e testé avec Chrome et Safari):

    //el === element on which horizontal scrolling is done 
//(can be container of scrolled element or body or any other ancestor)
var preventHistoryBack = function (e) {
  var delta = e.deltaX || e.wheelDeltaX;

  if (! delta) {
    return;
  }

  window.WebKitMediaKeyError /*detect safari*/ && (delta *= -1);

  if (((el.scrollLeft + el.offsetWidth) === el.scrollWidth && delta > 0) || (el.scrollLeft === 0 && delta < 0) ) {
    e.preventDefault();
  }
};
el.addEventListener('mousewheel', preventHistoryBack);