水平スクロール時にブラウザが履歴の前後に移動しないようにするにはどうすればよいですか？

Question

JQueryまたはNative JSを使用して、水平方向にスクロールするときに前後に移動するための最新のブラウザのデフォルト機能を無効にするにはどうすればよいですか？

これは、通常、トラックパッドを使用しているとき、およびスクロール可能なdivの最後またはスクロールまでスクロールしたときに発生します。

Answer 1

私はWebアプリケーションを作成したので、保存されていない変更が失われたり、ブラウザ履歴の前または次のページに終わることをユーザーに延期する保存されていない変更をユーザーに求めないようにしてください。

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); 
}; 

デモ：http://jsfiddle.net/DerekL/RgDBQ/show/

あなたは戻るボタンをスパムしない限り、以前のWebページに戻るか、戻るボタンを押したまま、前のエントリを選択することはできません。

_{注：onpopstate（またはイベントonbeforeunload）はiOSでは動作しません。}

Answer 3

あなたがマックにいる場合、これはトラックパッドジェスチャーによって発生します。

System Preferences -> Trackpad -> More Gestures. 

ないあなたが探しているJSのソリューションが、あなたが自分だけのためにそれを阻止したい場合は、機能をオフにすることができます。

Answer 4

ChromeとSafariでの動作（つまり、Chromeと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);