web-dev-qa-db-ja.com

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

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

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

javascriptjqueryfirefoxbrowserwebkit
14
Steve Chan

したがって、Webアプリを作成したので、保存されていない変更をユーザーに要求して、ユーザーが保存されていない変更を失ったり、ブラウザーの履歴の前または次のページに移動したりしないようにします。

私のように他の誰かがこの問題に遭遇した場合の解決策は次のとおりです。

window.onbeforeunload = function(e) {
    return 'Ask user a page leaving question here';
};
7
Steve Chan
history.pushState(null, null, location.href);
window.onpopstate = function(event) {
    history.go(1);
};

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

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

注：onpopstate（またはイベントonbeforeunload）はiOSでは機能しないようです。

20
Derek 朕會功夫

Macを使用している場合、これはトラックパッドジェスチャが原因です。

System Preferences -> Trackpad -> More Gestures.

探しているJSソリューションではありませんが、自分でそれを防ぎたい場合は、この機能をオフにすることができます。

4
AndrewHipp

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);
3
avetisk