概要
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が存在しているので、こういった場合は必要に応じて使い分けると良さそう。