零弐壱蜂

[CSS] macOS Chromeで領域外のバウンススクロールを無効化させる方法

概要

macOS の Chrome でトラックパッドでスクロール境界を超えてスクロールすると領域外が見える。これは「バウンス スクロール（Bounce Scroll）」と呼ばれるらしい。

システムの仕様上、バウンス スクロールが余計なケースがあるので無効化したい。

よくある対処パターン

よく「overflow: hiddenで領域外はスクロールさせない」といった手法が紹介されている。（今は動かないかもしれない）

html,
body {
  height: 100%;
  overflow: hidden;
}

だが、html, bodyにoverflow付与したくない場合もある。
また、ほかにもscrollイベントを使って無効化させる方法もあるみたいだが、mac/iOS のためだけに負荷の高いイベントを実装するのはつらい。

対象外環境に影響を与えない方法

CSS のoverscroll-behaviorプロパティを利用する。

overscroll-behaviorは、無駄な処理を実行しないのでページパフォーマンスに悪影響を及ぼさない利点がある。

方法

X 軸・Y 軸すべてにスクロール バウンスを適用させないだけであれば、下記のようにoverscroll-behaviorにnoneを指定すれば良い。

body {
  overscroll-behavior: none;
}

これでどの方向に対してもスクロール バウンスが発生しなくなる。

注意点

ただし、先述のコードで X 軸方向のスクロール バウンスも無効化させると、トラックパッドの戻る/進むのジェスチャが効かなくなってしまう。

このジェスチャを活かしたまま、Y 軸方向だけスクロール バウンスを無効化したい場合は、下記のようにoverscroll-behavior-yに対してnoneを追加すれば良い。

body {
  overscroll-behavior-y: none;
}

overscroll-behaviorは、それぞれoverscroll-behavior-y, overscroll-behavior-xが存在しているので、こういった場合は必要に応じて使い分けると良さそう。

参考