【CSS】横スクロールし切った時に勢い余ってページバックするのを防ぐ

状況

以下のようなスタイルを指定しているとする。

.element {
  width: 300px;
  overflow-x: scroll;
}

.element の内側の要素がはみ出した場合、横スクロールで表示される。この時、モバイルデバイスやトラックパッドを使用している場合、意図せずページ移動してしまうことがある。

対処コード

overscroll-behavior を使う。

.element {
  width: 300px;
  overflow-x: scroll;
  overscroll-behavior-x: contain;
}

ブラウザサポート状況

Chrome, Firefox, Edge, Opera では対応済み。 Safari では未対応。（2020/06/10現在）

caniuse.com

参考

CSS micro-tip: prevent history navigation on horizontally-scrolling elements - DEV