CSS overscroll-behavior 属性

定义和用法

overscroll-behavior 属性用于在尝试滚动超出滚动边界时，关闭元素的滚动链（scroll chaining）或过度滚动反馈（overscroll affordance）。

滚动链：当在一个元素上过度滚动时，会导致父元素的滚动行为。这是默认行为。

过度滚动反馈：当尝试滚动超出滚动边界时，向用户提供的反馈。例如，在移动设备上尝试滚动超出页面顶部时，通常会显示视觉反馈并刷新页面。

overscroll-behavior 属性是以下属性的简写形式：

• overscroll-behavior-x
• overscroll-behavior-y

overscroll-behavior 属性的值可以通过不同方式设置：

如果 overscroll-behavior 属性有两个值：

overscroll-behavior: none contain;

• x 方向：没有过度滚动行为
• y 方向：没有滚动链，但允许过度滚动反馈

如果 overscroll-behavior 属性有一个值：

overscroll-behavior: contain;

• x 和 y 方向：没有滚动链，但允许过度滚动反馈

实例

例子 1

关闭可滚动 <div> 元素的滚动链：

#yellowDiv {
  overscroll-behavior: contain;
}

亲自试一试

例子 2：双值语法：

将 overscroll-behavior 属性值设置为 auto none，允许 x 方向的滚动链和过度滚动反馈，但 y 方向不允许：

#pinkDiv {
  overcroll-behavior: auto none;
}

亲自试一试

CSS 语法

overscroll-behavior: auto|contain|none|initial|inherit;

属性值

技术细节

浏览器支持

表格中的数字表示首个完全支持该属性的浏览器版本。

* 在 Microsoft Edge 中，属性值 'none' 被当作 'contain' 处理，这是不正确的。

相关页面

参考：CSS overscroll-behavior-x 属性

参考：CSS overscroll-behavior-y 属性

参考：CSS scroll-behavior 属性

参考：CSS scroll-margin 属性

参考：CSS scroll-padding 属性

参考：CSS scroll-snap-align 属性