Come evitare che un browser di andare avanti/indietro nella storia, durante lo scorrimento orizzontale?

Come si può disattivare un moderno browser di default la funzionalità di utilizzo di JQuery o Nativo JS per andare avanti o indietro durante lo scorrimento orizzontale?

Questo di solito accade quando si utilizza un trackpad e quando scorse la fine o l’inizio di un elemento div.

  • Il driver e il trackpad è il vostro overlord. Vedere questo risposta.
InformationsquelleAutor Steve Chan | 2013-04-24

 

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

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

    Non sarà in grado di tornare indietro di una pagina web, a meno che non si spam il pulsante indietro o tenere premuto il pulsante indietro e scegliere la voce precedente.

    Nota: onpopstate (o di un evento onbeforeunload) non sembra funzionare su iOS.

    • Senza offesa, ma manipolare la cronologia del browser che è molto brutto in termini di esperienza utente. E ‘ molto confuso e fastidioso. Può vedere quello che i tuoi ottenendo, anche se
    • Si può ancora tornare indietro, se si tiene premuto il pulsante Indietro.
    • È brutto se fatto per nessuna ragione infatti. Ma ci sono legit casi per manipolare in questo modo, almeno temporaneamente… Un caso voglio applicare questa è per saltare la indesiderate percorso storico dall’utilizzo del css target pseudo-classe. O forse, disattivare la storia, e di fornire una custom back button invece.
    • O quando qualcuno è in un processo di pagamento e invalida il loro intero pagamento utilizzando il pulsante indietro, mentre utilizzando la pagina indietro pulsante funziona bene. Non riesco a modificare il processo, è gestito dal fornitore di servizi di pagamento, ma posso provare ad aiutare a prevenire l’utente dal inconsapevolmente avvitando in su!
    • Fantastico!!! Grazie
  2. 7

    Così ho pensato che dato che ho creato una web app, perché non richiede all’utente di eventuali modifiche non salvate che rinviare l’utente da perdere tutte le modifiche non salvate o di finire sulla pagina precedente o successiva nella cronologia del browser.

    Ecco la soluzione se qualcuno si imbatte in questo problema come ho fatto io:

    window.onbeforeunload = function(e) {
        return 'Ask user a page leaving question here';
    }; 
    • non funziona su Firefox 37
    • Può anche e.preventDefault(); return false;
  3. 4

    Se sei su un mac, questo è causato da una Traccia Pad Gesti.

    System Preferences -> Trackpad -> More Gestures. 

    Non il JS soluzione che stai cercando, ma se si desidera solo per evitare che per te è possibile disattivare la funzione.

    • Siete esattamente a destra, perché avrebbero dovuto implementare un tale fastidioso modo di saltare avanti e indietro nel browser? Penso che questo è così fastidioso per qualsiasi utente quando si sta cercando di cercare qualcosa in un riquadro di scorrimento orizzontale.
  4. 3

    Funziona in Chrome e Safari (io.e testato con Chrome e 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);
    • Nota, “la ruota” e “mouseweel” funziona un po ‘ diversamente: stackoverflow.com/questions/25204282/…
    • Funziona, ma dal momento che Chrome 51 vedrai ” [Violazione] Aggiunto non passiva listener di eventi per una scroll-blocco ‘ruota’ evento’ messaggio in console. Ma abbiamo bisogno di nonpassive evento, perché noi chiamiamo ‘preventDefault’, e non è chiaro come eliminare il messaggio

Lascia un commento