Come impedire a un browser di andare avanti/indietro nella cronologia quando si scorre orizzontalmente?

Question

Come si può disabilitare una funzionalità predefinita dei browser moderni usando JQuery o Native JS per andare avanti o indietro quando si scorre orizzontalmente?

Questo di solito accade quando si utilizza un trackpad e quando si scorre fino alla fine o all'inizio di un div scorrevole.

Answer 1

Quindi ho pensato che da quando ho creato un'app Web, perché non chiedere all'utente eventuali modifiche non salvate che rinvieranno l'utente a perdere le modifiche non salvate o finire alla pagina precedente o successiva nella cronologia del browser.

Ecco la soluzione, se nessun altro si imbatte in questo problema come ho fatto io:

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

Answer 2

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 alla pagina Web precedente, a meno che non spam pulsante Indietro o tenere premuto il pulsante indietro e scegliere la voce precedente.

_{Nota: onpopstate (o evento onbeforeunload) non sembra funzionare su iOS.}

Answer 3

Se si è su un Mac, ciò è causato dai movimenti del trackpad.

System Preferences -> Trackpad -> More Gestures. 

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

Answer 4

Lavori in Chrome e Safari (cioè 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);