Tailwind CSS on GitHub

Overscroll Behavior

用于控制浏览器到达滚动区域边界时的行为的功能类。

Default 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 的响应式设计功能的更多信息,请查看 响应式设计 文档。

定制

变体

默认情况下, 针对 overscroll-behavior 功能类,只生成 responsive 变体。

您可以通过修改您的 tailwind.config.js 文件中的 variants 部分中的 overscrollBehavior 属性来控制为 overscroll-behavior 功能生成哪些变体。

例如,这个配置将生成 hover and focus 变体:

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

禁用

如果您不打算在您的项目中使用 overscroll-behavior 功能,您可以通过在配置文件的 corePlugins 部分将 overscrollBehavior 属性设置为 false 来完全禁用它们:

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