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

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.}

So I figured since i've created a web app, why not prompt the user for any unsaved changes which will defer the user from loosing any unsaved changes or ending up on the previous or next page in the browser history.

Here is the solution if any one else comes across this problem like I did:

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

If you're on a mac this is caused by the Track Pad Gestures.

System Preferences -> Trackpad -> More Gestures. 

Not the JS solution you're looking for, but if you just want to prevent it for yourself you can turn the feature off.