overscroll-behavior-y

Baseline 2022
Newly available

Since September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

overscroll-behavior-y CSS 属性设置浏览器在到达滚动区域的垂直边界时的行为。

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

css
/* 关键字值 */
overscroll-behavior-y: auto; /* 默认 */
overscroll-behavior-y: contain;
overscroll-behavior-y: none;

/* 全局值 */
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

在设置了该值的元素内部会观察到默认滚动溢出行为(例如“回弹”效果或刷新),但相邻滚动区域不会发生滚动行为,例如底部元素不会滚动。

none

相邻滚动区域不会发生滚动行为,并防止默认滚动溢出行为。

形式定义

初始值auto
适用元素non-replaced block-level elements and non-replaced inline-block elements
是否是继承属性
计算值as specified
动画类型离散值

形式语法

overscroll-behavior-y = 
contain |
none |
auto

示例

阻止底部元素在垂直方向上滚动

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

有关完整示例和解释,请参阅 overscroll-behavior

规范

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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
overscroll-behavior-y
auto
contain
none

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Has more compatibility info.

参见