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

浏览器兼容性

BCD tables only load in the browser

参见