オーバースクロール動作

Tailwind CSS version
v1.6.0+

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

Class reference

Class
Properties
.overscroll-autooverscroll-behavior: auto;
.overscroll-containoverscroll-behavior: contain;
.overscroll-noneoverscroll-behavior: none;
.overscroll-y-autooverscroll-behavior-y: auto;
.overscroll-y-containoverscroll-behavior-y: contain;
.overscroll-y-noneoverscroll-behavior-y: none;
.overscroll-x-autooverscroll-behavior-x: auto;
.overscroll-x-containoverscroll-behavior-x: contain;
.overscroll-x-noneoverscroll-behavior-x: none;

Auto

overscroll-autoを使用して、ユーザーがプライマリスクロール領域の境界に達したときに親スクロール領域をスクロールし続けることができるようにします。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.

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

Contain

overscroll-containを使用して、ターゲット領域でのスクロールが親要素でのスクロールをトリガーしないようにしますが、それをサポートするオペレーティングシステムでコンテナの終わりを超えてスクロールするときの「バウンス」効果を保持します。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.

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

None

overscroll-noneを使用して、ターゲット領域でのスクロールが親要素でのスクロールをトリガーしないようにし、コンテナの終わりを超えてスクロールするときの「バウンス」効果も防止します。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.

<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のレスポンシブデザイン機能の詳細については、Responsive Designのドキュメントをご覧ください。

カスタマイズ

レスポンシブと疑似バリアントクラス

デフォルトでonly responsive バリアントはoverscroll-behavior utilitiesのために作られます。

あなたはどのバリアントがoverscroll-behavior utilitiesのために作られるかを tailwind.config.jsファイル内のvariantsセクションのoverscrollBehaviorプロパティを修正することによってコントロールできます。

例として、この設定は also hover and focus バリアントを作ります。

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

無効にする

もしoverscroll-behavior utilitiesを使う予定がないなら、configファイルのcorePluginsセクションのoverscrollBehavior propertyfalseに設定することで完全に無効にすることができます。

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

Translated by T.Arai @ Entap,Inc. / スマホアプリ開発会社

Tailwind UI is now in early access!