1. 布局
  2. overscroll-behavior

布局

overscroll-behavior

用于控制浏览器在到达滚动区域边界时的行为的实用工具。

样式
overscroll-auto
overscroll-behavior: auto;
overscroll-contain
overscroll-behavior: contain;
overscroll-none
overscroll-behavior: none;
overscroll-x-auto
overscroll-behavior-x: auto;
overscroll-x-contain
overscroll-behavior-x: contain;
overscroll-x-none
overscroll-behavior-x: none;
overscroll-y-auto
overscroll-behavior-y: auto;
overscroll-y-contain
overscroll-behavior-y: contain;
overscroll-y-none
overscroll-behavior-y: none;

示例

阻止父元素过度滚动

使用 overscroll-contain 实用工具来防止在目标区域滚动时触发父元素的滚动,但在支持它的操作系统中,当滚动超过容器末端时,保留“回弹”效果

滚动以查看效果

好吧,我来告诉你一些事情,小滑头。你知道那个小印章,上面写着“纽约公共图书馆”吗?嗯,这对你来说可能不算什么,但对我来说意义重大。非常重大。

当然,想笑就笑吧。我以前见过你这种人:招摇,出风头,炫耀传统。是的,我知道你在想什么。这家伙为什么对旧图书馆的书籍大惊小怪的?好吧,我给你一个提示,小伙子。

也许我们可以没有图书馆也能活下去,像你我这样的人。也许吧。当然,我们太老了,无法改变世界,但是那个孩子呢,现在正坐在当地图书馆的分馆里,打开一本书,在《戴帽子的猫》和《五兄弟》上发现小鸡鸡和小妹妹的图画?难道他不应该得到更好的吗?

<div class="overscroll-contain ...">Well, let me tell you something, ...</div>

阻止过度滚动回弹

使用 overscroll-none 实用工具来防止在目标区域滚动时触发父元素的滚动,并且在滚动超过容器末端时,也防止“回弹”效果

滚动以查看效果

好吧,我来告诉你一些事情,小滑头。你知道那个小印章,上面写着“纽约公共图书馆”吗?嗯,这对你来说可能不算什么,但对我来说意义重大。非常重大。

当然,想笑就笑吧。我以前见过你这种人:招摇,出风头,炫耀传统。是的,我知道你在想什么。这家伙为什么对旧图书馆的书籍大惊小怪的?好吧,我给你一个提示,小伙子。

也许我们可以没有图书馆也能活下去,像你我这样的人。也许吧。当然,我们太老了,无法改变世界,但是那个孩子呢,现在正坐在当地图书馆的分馆里,打开一本书,在《戴帽子的猫》和《五兄弟》上发现小鸡鸡和小妹妹的图画?难道他不应该得到更好的吗?

<div class="overscroll-none ...">Well, let me tell you something, ...</div>

使用默认的过度滚动行为

使用 overscroll-auto 实用工具,使用户能够在到达主滚动区域的边界时继续滚动父滚动区域

滚动以查看效果

好吧,我来告诉你一些事情,小滑头。你知道那个小印章,上面写着“纽约公共图书馆”吗?嗯,这对你来说可能不算什么,但对我来说意义重大。非常重大。

当然,想笑就笑吧。我以前见过你这种人:招摇,出风头,炫耀传统。是的,我知道你在想什么。这家伙为什么对旧图书馆的书籍大惊小怪的?好吧,我给你一个提示,小伙子。

也许我们可以没有图书馆也能活下去,像你我这样的人。也许吧。当然,我们太老了,无法改变世界,但是那个孩子呢,现在正坐在当地图书馆的分馆里,打开一本书,在《戴帽子的猫》和《五兄弟》上发现小鸡鸡和小妹妹的图画?难道他不应该得到更好的吗?

<div class="overscroll-auto ...">Well, let me tell you something, ...</div>

响应式设计

前缀一个 overscroll-behavior 实用工具 使用断点变体,例如 md:,仅在以下情况下应用该实用工具中等 屏幕尺寸及以上

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

变体文档中了解更多关于使用变体的信息。

版权所有 © 2025 Tailwind Labs Inc.·商标政策