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

浏览器兼容性

另见