目录

CSS overscroll-behavior 属性


示例

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

#yellowDiv {
  overscroll-behavior: contain;
}
亲自试一试 »

下面有更多 "亲自试一试" 示例。


定义和用法

这个overscroll-behavior属性用于在尝试滚动超过滚动边界时关闭元素上的滚动链接或过度滚动功能。

滚动链接是指在元素上过度滚动会导致父元素上的滚动行为。这是默认行为。

过度滚动可供性是当尝试滚动超出滚动边界时给用户的反馈。例如,当移动设备滚动到页面顶部之外时,视觉反馈和页面刷新通常会发生。

这个overscroll-behaviorproperty 是以下属性的简写:

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

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

  • 过度滚动行为:不包含;
    • x 方向:没有过度滚动行为
    • y 方向:没有滚动链接,但允许过度滚动可供性

如果 overscroll-behavior 属性只有一个值:

  • 过度滚动行为:包含;
    • x 或 y 方向上没有滚动链接,但允许过度滚动
默认值: 汽车
遗传:
可动画: 不。阅读可动画的
版本: CSS3
JavaScript 语法: 对象.style.overscrollBehavior="none"尝试一下

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
overscroll-behavior 63.0 18.0 * 59.0 16.0 50.0

* 在 Microsoft Edge 中,属性值“none”被视为“contain”,这是不正确的。



CSS 语法

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

属性值

Value Description
auto Allows scroll chaining and overscroll affordance behavior. This is default
contain Allows overscroll affordance behavior, but not scroll chaining.
none Does not allow overscroll affordance or scroll chaining behavior.
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

更多示例

二值语法

随着overscroll-behavior属性值设置为“auto none”,在 x 方向上允许滚动链接和过度滚动可供性,但在 y 方向上不允许:

#pinkDiv {
  overcroll-behavior: auto none;
}
亲自试一试 »

相关页面

CSS overscroll-behavior-x 属性:CSS Overscroll-behavior-x 属性

CSS overscroll-behavior-y 属性:CSS Overscroll-behavior-y 属性

CSS 滚动行为属性:CSS 滚动行为属性

CSS 滚动边距属性:CSS 滚动边距属性

CSS 滚动填充属性:CSS 滚动填充属性

CSS 滚动对齐属性:CSS 滚动对齐属性