overscroll-behavior-x

overscroll-behavior-x 这个CSS属性用来控制当滚动到区域的水平边界时的浏览器行为。

备注: 详细的解释请访问 overscroll-behavior 

/* Keyword values */
overscroll-behavior: auto; /* default */
overscroll-behavior: contain;
overscroll-behavior: none;

/* Global values */
overflow: inherit;
overflow: initial;
overflow: unset;
初始值auto
适用元素non-replaced block-level elements and non-replaced inline-block elements
是否是继承属性
适用媒体visual
计算值as specified
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

overscroll-behavior-x 属性可以选用下列值。

auto
默认的滚动溢出行为表现的和正常一样。
contain
默认的滚动溢出行为将被内部的元素观察到,(例如: “bounce”效果或者刷新),但是相邻的区域不会产生连续滚动效果,例如: 在下面的元素不会被滚动。
none
相邻的滚动区域不会有连续滚动效果,并且默认的滚动溢出行为会被阻止。

正式语法

contain | none | auto

示例

在这个简单的例子中(源代码), 有两个块级别的盒子, 一个在另一个的里面. 外部的盒子设置有一个大的 width 所以整个页面会水平滚动. 内部的盒子设置有一个小的宽度(和 height) 所以他位于观察点内合适的地方,但是他的内容被设置了一个大的 width, 所以它会水平的滚动.

默认情况下, 当内部的盒子被滚动达到边界的时候,整个页面将开始滚动,这个行为有可能不是我们期望的. 为了避便这个行为,你可以设置 overscroll-behavior-x: contain 在里面的盒子上:

main > div {
  height: 300px;
  width: 500px;
  overflow: auto;
  position: relative;
  top: 100px;
  left: 100px;
  overscroll-behavior-x: contain;
}

规格

规格 状态值 注释
Unknown
overscroll-behavior-x
Unknown  

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
overscroll-behavior-xChrome Full support 63Edge Partial support 18
Notes
Partial support 18
Notes
Notes Currently the none value incorrectly behaves as contain (allowing for the elastic bounce effect).
Firefox Full support 59IE No support NoOpera Full support 50Safari No support NoWebView Android Full support 63Chrome Android Full support 63Firefox Android Full support 59Opera Android Full support 46Safari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
Partial support  
Partial support
No support  
No support
See implementation notes.
See implementation notes.

See also