[CSS] macOS Chrome領域ウンスクロール無効させる方法

3 min read

概要

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

参考

このページをシェアする

関連タグ

関連記事

[CSS] カスケードレイヤー(@layer)とITCSSの概念を組み合わせた設計を考える

カスケードレイヤーとは / ITCSS のレイヤー / ITCSS のレイヤーをカスケードレイヤーに落とし込む / 参考

[CSS設計] ITCSSとは

TL;DR / CSS の問題 / ITCSS / 参考

[CSS設計] ITCSSをプロダクトに利用した所感

CSS の問題点 / CSS 設計 / ITCSS とは / ITCSS のメリット / おわり / 参考

Boolean型の変数に適した命名規則

背景 / プレフィックス / どのような条件なのか分かりやすくする / 否定形を避ける / 同じ意味の単語を避ける / プロジェクトの命名規則やコーディング規約に従う / Linter で矯正する

Googleが配信している日本語ウェブフォント一覧

はじめに(結論) / M+ 1p / Rounded M+ 1c / はんなり明朝 / こころ明朝 / さわらび明朝 / さわらびゴシック / ニクキュウ / ニコモジ / Noto Sans Japanese / まとめ

[CSS] 国内の主要サイトのfont-familyを調べてみた

日本の主要サイトとは / font-family 一覧 / 関連