overscroll-behavior

Class Styles

Class	Styles
`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-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 ...">好吧，让我告诉你一件事，...</div>

使用 overscroll-none 实用工具来防止目标区域的滚动触发父元素的滚动，同时也防止在滚动超出容器末端时的“反弹”效果：

滚动以查看行为

<div class="overscroll-none ...">好吧，让我告诉你一件事，...</div>

使用 overscroll-auto 实用工具来让用户在达到主要滚动区域的边界时继续滚动父滚动区域：

滚动以查看行为

<div class="overscroll-auto ...">好吧，让我告诉你一件事，...</div>

Prefix an overscroll-behavior utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

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

Learn more about using variants in the variants documentation.