这篇翻译不完整。请帮忙从英语翻译这篇文章

overscroll-behavior CSS 属性是 overscroll-behavior-xoverscroll-behavior-y 属性的合并写法, 让你可以控制浏览器过度滚动时的表现——也就是滚动到边界。

/* 关键字的值 */
overscroll-behavior: auto; /* 默认 */
overscroll-behavior: contain;
overscroll-behavior: none;

/* 使用2个值 */
overscroll-behavior: auto contain;

/* Global values */
overflow: inherit;
overflow: initial;
overflow: unset;

默认情况下,当触及页面顶部或者底部时(或者是其他可滚动区域),移动端浏览器倾向于提供一种“触底”效果,甚至进行页面刷新。你可能也发现了,当对话框中含有可滚动内容时,一旦滚动至对话框的边界,对话框下方的页面内容也开始滚动了——这被称为“滚动链”。 

在某些情况下我们不想要这些表现,使用 overscroll-behavior 来去除不需要的滚动链,以及类似 QQ 一类的应用下拉刷新效果。

初始值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 属性可以使用下面列表中的一或两个关键字指定。

使用两个关键字来指定 overscroll-behavior 分别在 x 和 y 轴的值。只用一个值的话,x 和 y 轴都被指定为该值。

auto
默认效果
contain
设置这个值后,默认的滚动边界行为不变(“触底”效果或者刷新),但是临近的滚动区域不会被滚动链影响到,比如对话框后方的页面不会滚动。
none
临近滚动区域不受到滚动链影响,而且默认的滚动到边界的表现也被阻止。

Formal syntax

[ contain | none | auto ]{1,2}

Examples

In our overscroll-behavior example (see the source code also), we present a full-page list of fake contacts, and a dialog box containing a chat window. 

Both of these areas scroll; normally if you scrolled the chat window until you hit a scroll boundary, the underlying contacts window would start to scroll too, which is not desirable. This can be stopped using overscroll-behavior-y (overscroll-behavior would also work) on the chat window, like this:

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

We also wanted to get rid of the standard overscroll effects when the contacts are scrolled to the top or bottom (e.g. Chrome on Android refreshes the page when you scroll past the top boundary). This can be prevented by setting overscroll-behavior: none on the <body> element:

body {
  margin: 0;
  overscroll-behavior: none;
}

Specifications

Until the CSSWG publishes their own draft, the specification can only be found in it's WICG Github Repository.

Specification Status Comment
Unknown
overscroll-behavior
Unknown  

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome 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 63Edge Mobile No support NoFirefox Android Full support 59Opera Android Full support 50Safari 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

 

文档标签和贡献者

此页面的贡献者: WangLeto, JanWing1995
最后编辑者: WangLeto,