📦

【Tailwind和訳】LAYOUT/Overscroll Behavior

2021/10/24に公開

この記事について

この記事は、LAYOUT/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;`

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

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

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

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

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

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

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

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

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

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

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

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

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

tailwind.config.js

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

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

tailwind.config.js

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

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