概要

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

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

よく対処パターン

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

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

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

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

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

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

方法

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

body {
  overscroll-behavior: none;
}

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

注意点

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

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

body {
   overscroll-behavior-y: none;
}

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

参考