5
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【HTML/CSS】Chromeで二本指スワイプした際に起こる「戻る」「進む」を無効化する

Last updated at Posted at 2020-08-21

横スクロールしたいだけなのに戻ろうとすな

横に長い、例えばスプレッドシートみたいなページを作っていて、ノートPCのChromeで見ていた際にトラックパッドを使ってスクロールしながら閲覧すると思います。
その際にちょっと操作を誤ると、いわゆるブラウザの**「戻る」「進む」頻繫に実行されたりしてとても鶏冠に来る**。

chrome_swp.gif

↑これ

調べてみるとCSSで無効にできるらしい

ソースコード

html {
  overscroll-behavior-x: none;
}

これを対象のページに書くだけで簡単に無効化できた。すごい

Chromeの設定で無効にする

chrome://flags/#overscroll-history-navigation

ブラウザ自体でこの機能を無効にする場合は↑のURLを張り付けて、「Overscroll history navigation」という項目を無効(disabled)に変更しChromeを再起動するといいみたいです。

コメント 2020-08-21 005023.jpg

参考URL

5
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?