Arrêtez le retour / l'arrière du chrominomètre à deux doigts

Je souhaite désactiver le double glissement de doigts qui provoque le retour ou l'avancement de Chrome. J'ai un site Web où l'utilisateur peut perdre des progrès sur son travail s'il ne l'enregistre pas spécifiquement.

J'ai essayé d'utiliser window.onbeforeunload mais cela ne semble pas fonctionner si j'ai des hachis dans l'url (l'arrière-plan changerait entre www.example.com/work/#step1#unsaved www.example.com/work/#step0 ) Et l'événement ne semble pas déclencher.

J'allais passer à une autre solution mais aujourd'hui, j'ai remarqué que dans Google Docs, elle était complètement désactivée. Comment ont-ils réussi?

Vous regardez le problème au mauvais niveau. OnBeforeUnload n'est simplement pas déclenché car il n'y a rien qui soit déchargé du point de vue des navigateurs. Par conséquent, vous avez complètement implémenté le mauvais mécanisme de version. Les fragments concernent les états des pages, et non les états des documents, car vous l'utilisez maintenant.

Si vous insistez sur le maintien de l'état à travers des fragments de hash, vous devez utiliser un autre mécanisme pour vous protéger contre l'évolution de l'état de la page. Étant donné que tous les navigateurs actuels prennent en charge LocalStorage, j'utiliserais cela. Et bien, alors qu'il y a lieu, placez toutes les données d'état du document là-bas plutôt que dans l'URL, car c'est ainsi que Google Docs le fait et c'est pourquoi ils n'ont pas ce problème.

Ouvrez la page spécifique dans un nouvel onglet / fenêtre par défaut (en mettant target = "_ blank"> dans l'hyperlien). De cette façon, il n'y aura pas de page précédente pour revenir.

Ou éviter le défilement horizontal par défaut. Pour ce faire, vous pouvez utiliser jquery.mousewheel pour faire:

 $(document).on("mousewheel",function(event,delta){ // prevent horizontal scrolling if (event.originalEvent.wheelDeltaX !== 0) { event.preventDefault(); } }); 

S'appuyant sur les réponses précédentes fournies par @roy riojas et @redgetan – j'ai combiné leurs réponses pour permettre que cela soit dynamique et empêche à la fois vers l'avant et vers l'arrière – à nouveau – pour les commentaires de @ roy – vous devez connaître la classe de votre élément et Pour cette implémentation – la classe de l'élément imbriqué qui se déroule réellement

 (function ($) { $(document).on('mousewheel', function(e) { var $target = $(e.target).closest('.scrollable-h'); var scroll = $target.scrollLeft(); var maxScroll = $target.find('.scrollable-h-content').width() - $target.width(); if(scroll <= 0) { if(scroll <= 0 && e.originalEvent.wheelDeltaX >= 0) { e.preventDefault(); } } if(scroll >= maxScroll) { if (scroll >1 && e.originalEvent.wheelDeltaX <= 0) { e.preventDefault(); } } });}(jQuery)); 

Bonjour, cela a fonctionné pour moi sur chrome, mais pas pour la page entière, mais pour les endroits où j'ai un contenu défilable.

Dans Google Docs (Spreadsheets), il semble fonctionner car ils n'ont pas de page de retour. Si vous naviguez vers une autre URL (manuellement), cela ne vous empêchera pas de naviguer vers l'arrière.

 $(document).on('mousewheel', function(e) { var $target = $(e.target).closest('.scrollable-h'); if ($target.scrollLeft () <= 4) { $target.scrollLeft(5); return false; } }); 

Une chose à garder à l'esprit est que le code ci-dessus fait deux hypothèses:

  1. Votre élément avec un contenu défilable horizontal a une classe scrollable-h
  2. Si vous vérifiez si le scrollLeft si plus grand que 4px, puis faites-le défiler jusqu'à 5px renvoyant false, annulez effectivement le geste du dos

Important: – Cela n'empêche le geste de glissement arrière, quand il est fait rapidement, si vous le faites très lentement, cela va encore déclencher parfois.

  • De même, cela n'empêche pas le geste de glissement vers l'avant, mais cela pourrait également être effectué en vérifiant si l'élément a atteint le maximum de scrollLeft. Si tel est le cas, déplacez-le 20px en arrière et renvoyez le faux pour éviter que l'événement ne se produise … Il appartient à vous d'ajouter ce cas d'utilisation si cela vous paraît logique.

Vous pouvez consulter une preuve de concept ici. http://jsfiddle.net/royriojas/JVA6m/#base

J'ai pu le désactiver en tapant chrome: // drapeaux dans la barre d'adresse et en descendant vers "Overscroll history navigation" et en le définissant sur "Disabled" dans la liste déroulante.