Javascript Girl
  1. Javascript Girl
  3. Comment empêcher un navigateur de revenir en arrière dans l'histoire lorsque vous faites défiler horizontalement?
Intereting Posts
Pourquoi JSLint préfère-t-elle une notation par points sur Square Bracket? Epub de chargement basé sur la page lors de la modification de la police Comment transmettre des données à $ mdDialog en matériau angulaire Ajouter un symbole hash '#' pour url avec une action de formulaire? Comment créer un email haché dans jQuery? Comment obtenir l'identité d'un nouvel objet à partir d'une mutation? Pourquoi deux objets identiques ne sont-ils pas égaux les uns aux autres? Rediriger vers 3 pages en fonction de l'option sélectionnée avec validation La création Regex implicite et explicite donne différents résultats exécutifs Modifier la valeur de matérialiser la boîte de sélection par jquery Calculez le lat / lng des coins de recouvrement du sol à partir du fichier kml Contenu () dans <type d'objet = "texte / html"> </ object>? Get / set current keyframes @ keyframes / images clés StopPropagation vs. stopImmediatePropagation Window.Open POST

Comment empêcher un navigateur de revenir en arrière dans l'histoire lorsque vous faites défiler horizontalement?

Comment peut-on désactiver une fonctionnalité par défaut des navigateurs modernes en utilisant JQuery ou Native JS pour aller en arrière ou en avant lorsque vous faites défiler horizontalement?

Cela se produit habituellement lors de l'utilisation d'un pavé tactile et lorsqu'il se déroule jusqu'à la fin ou au début d'une division défilable. 

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

Demo: http://jsfiddle.net/DerekL/RgDBQ/show/

Vous ne pourrez pas revenir au site Web précédent, à moins que vous ne spammez le bouton Précédent ou maintenez enfoncé le bouton Précédent et choisissez l'entrée précédente.

Remarque: onpopstate (ou event onbeforeunload ) ne semble pas fonctionner sur iOS.

Donc, j'ai pensé depuis que j'ai créé une application Web, pourquoi ne pas demander à l'utilisateur de tout changement non enregistré qui différera l'utilisateur de tout changement non enregistré ou se terminant sur la page précédente ou suivante dans l'historique du navigateur.

Voici la solution si quelqu'un d'autre rencontre ce problème comme je l'ai fait: 

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

Si vous êtes sur un mac, cela est causé par les gestes Track Pad Gestures. 

 System Preferences -> Trackpad -> More Gestures.

Pas la solution JS que vous recherchez, mais si vous voulez simplement l'empêcher par vous-même, vous pouvez désactiver la fonctionnalité.

Fonctionne avec Chrome et Safari (c'est-à-dire 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);