📦

【Tailwind和訳】LAYOUT/Overscroll Behavior

2021/10/24に公開約2,800字

この記事について

この記事は、LAYOUT/Overscroll Behaviorの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Overscroll Behavior

スクロールエリアの境界に到達したときのブラウザの動作を制御するユーティリティ。

Class Properties
overscroll-auto overscroll-behavior: auto;
overscroll-contain overscroll-behavior: contain;
overscroll-none overscroll-behavior: none;
overscroll-y-auto overscroll-behavior-y: auto;
overscroll-y-contain overscroll-behavior-y: contain;
overscroll-y-none overscroll-behavior-y: none;
overscroll-x-auto overscroll-behavior-x: auto;
overscroll-x-contain overscroll-behavior-x: contain;
overscroll-x-none overscroll-behavior-x: none;

Auto

overscroll-autoを使用すると、ユーザーが親スクロールエリアの境界に達したときに、親スクロールエリアのスクロールを続けることができるようにする。(デフォルト値)

<div class="overscroll-auto ...">Lorem ipsum dolor sit amet...</div>

Contain

overscroll-containを使用すると、対象領域でのスクロールが親要素でのスクロールを誘発するのを防ぐことができる。しかし、コンテナの端を越えてスクロールしたときの「バウンス」効果(ビヨヨンってなるやつ)は、「バウンス」効果をサポートするオペレーティングシステムでは維持されます。

<div class="overscroll-contain ...">Lorem ipsum dolor sit amet...</div>

None

overscroll-noneを使用すると、ターゲットエリアでのスクロールが親要素でのスクロールを誘発することを防ぎ、コンテナの端を超えてスクロールしたときの「バウンス」効果を防ぐことができます。

<div class="overscroll-none ...">Lorem ipsum dolor sit amet...</div>

Responsive

overscroll-behavior プロパティを特定のブレークポイントで制御するには、既存の overscroll-behavior ユーティリティに{screen}:のプレフィックスを追加します。

例えば、md:overscroll-contain を使うと、中程度のスクリーンサイズ以上でのみ overscroll-contain ユーティリティを適用することができます。

<div class="overscroll-auto md:overscroll-contain lg:overscroll-none ...">
  <!-- ... -->
</div>

Tailwind のレスポンシブデザイン機能の詳細については、レスポンシブデザインのドキュメントをご覧ください。

Customizing

Variants

デフォルトでは、overscroll-behavior ユーティリティのためにレスポンシブ・バリアントのみが生成されます。

tailwind.config.js ファイルの variants セクションにある overscrollBehavior プロパティを変更することで、overscroll-behavior ユーティリティのために生成されるバリアントをコントロールすることができます。

例えば、このコンフィグは hover と focus のバリアントも生成します。

tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       overscrollBehavior: ['hover', 'focus'],
      }
    }
  }

Disabling

プロジェクトで overscroll-behavior ユーティリティを使う予定がない場合は、設定ファイルの corePlugins セクションで overscrollBehavior プロパティを false に設定することで、完全に無効にすることができます。

tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     overscrollBehavior: false,
    }
  }

Discussion

ログインするとコメントできます