overscroll-behavior-y

Baseline 已广泛支持

此功能已成熟，并可在多种设备和浏览器版本上运行。自 2022 年 9 月起，所有浏览器都已支持此功能。

overscroll-behavior-y CSS 属性设置了当滚动区域的垂直边界被触及时的浏览器行为。

有关完整说明，请参阅 overscroll-behavior。

语法

css

/* Keyword values */
overscroll-behavior-y: auto; /* default */
overscroll-behavior-y: contain;
overscroll-behavior-y: none;

/* Global values */
overscroll-behavior-y: inherit;
overscroll-behavior-y: initial;
overscroll-behavior-y: revert;
overscroll-behavior-y: revert-layer;
overscroll-behavior-y: unset;

overscroll-behavior-y 属性被指定为从以下值列表中选择的关键字。

值

auto: 默认的滚动溢出行为正常发生。
contain: 在此值设置的元素内部，会观察到默认的滚动溢出行为（例如，“弹跳”效果）。但是，在相邻的滚动区域上不会发生滚动链；底层元素不会滚动。contain 值会禁用原生的浏览器导航，包括垂直的下拉刷新手势和水平滑动导航。
none: 邻近的滚动区域不会发生滚动链接，并且会阻止默认的滚动溢出行为。

正式定义

初始值	`auto`
应用于	非替换块级元素和非替换行内块元素
继承性	否
计算值	同指定值
动画类型	离散

正式语法

overscroll-behavior-y = 
  contain  |
  none     |
  auto

示例

阻止底层元素垂直滚动

css

.messages {
  height: 220px;
  overflow: auto;
  overscroll-behavior-y: contain;
}

有关完整示例和说明，请参阅 overscroll-behavior。

规范

规范
CSS Overscroll Behavior Module Level 1 # overscroll-behavior-longhands-physical

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面由 MDN 贡献者最后修改于 2025 年 7 月 14 日。

在 GitHub 上查看此页面 • 报告此内容的问题