overscroll-behavior-x
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-x
这个 CSS 属性用来控制当滚动到区域的水平边界时的浏览器行为。
备注:详细的解释请访问 overscroll-behavior
css
/* Keyword values */
overscroll-behavior: auto; /* default */
overscroll-behavior: contain;
overscroll-behavior: none;
/* Global values */
overflow: inherit;
overflow: initial;
overflow: unset;
语法
overscroll-behavior-x
属性可以选用下列值。
值
正式语法
示例
在这个简单的例子中 (源代码), 有两个块级别的盒子,一个在另一个的里面。外部的盒子设置有一个大的 width
所以整个页面会水平滚动。内部的盒子设置有一个小的宽度 (和 height
) 所以他位于观察点内合适的地方,但是他的内容被设置了一个大的 width
, 所以它会水平的滚动。
默认情况下,当内部的盒子被滚动达到边界的时候,整个页面将开始滚动,这个行为有可能不是我们期望的。为了避便这个行为,你可以设置 overscroll-behavior-x: contain
在里面的盒子上:
css
main > div {
height: 300px;
width: 500px;
overflow: auto;
position: relative;
top: 100px;
left: 100px;
overscroll-behavior-x: contain;
}
规范
Specification |
---|
CSS Overscroll Behavior Module Level 1 # overscroll-behavior-longhands-physical |
浏览器兼容性
BCD tables only load in the browser