javascript - How to prevent a browser from going back/forward in history when scrolling horizontally?

Question

How can one disable a modern browsers default functionality using JQuery or Native JS for going backwards or forwards when scrolling horizontally?

This usually happens when using a trackpad and when scrolled to the end or start of a scrollable div.

Answer 1

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

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

You won't be able to go back to the previous webpage, unless you spam the back button or hold down the back button and choose the previous entry.

_{Note: onpopstate (or event onbeforeunload) doesn't seem to work on iOS.}