overscroll-behavior-y

The overscroll-behavior-y CSS property sets the browser's behavior when the vertical boundary of a scrolling area is reached.

See overscroll-behavior for a full explanation.

语法

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;

The overscroll-behavior-y property is specified as a keyword chosen from the list of values below.

值

auto

The default scroll overflow behavior occurs as normal.

contain

Default scroll overflow behavior (e.g., "bounce" effects) is observed inside the element where this value is set. However, no scroll chaining occurs on neighboring scrolling areas; the underlying elements will not scroll. The contain value disables native browser navigation, including the vertical pull-to-refresh gesture and horizontal swipe navigation.

none

No scroll chaining occurs to neighboring scrolling areas, and default scroll overflow behavior is prevented.

正式定义

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

正式语法

overscroll-behavior-y = 
  contain  |
  none     |
  auto

示例

Preventing an underlying element from scrolling vertically

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

See overscroll-behavior for a full example and explanation.

规范

规范
CSS 滚动溢出行为模块级别 1
# overscroll-behavior-longhands-physical

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅