overscroll-behavior

**overscroll-behavior** CSS 属性设置浏览器在到达滚动区域边界时执行的操作。

试一试

构成属性

此属性是以下 CSS 属性的简写形式

语法

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

/* Two values */
overscroll-behavior: auto contain;

/* Global values */
overscroll-behavior: inherit;
overscroll-behavior: initial;
overscroll-behavior: revert;
overscroll-behavior: revert-layer;
overscroll-behavior: unset;

overscroll-behavior 属性指定为从以下值列表中选择的 1 个或 2 个关键字。

两个关键字分别指定 x 和 y 轴上的 overscroll-behavior 值。如果只指定一个值，则假定 x 和 y 具有相同的值。

值

auto

默认滚动溢出行为正常发生。

contain

在设置此值的元素内部观察到默认滚动溢出行为（例如，“反弹”效果）。但是，在相邻的滚动区域不会发生滚动链接；基础元素不会滚动。contain 值禁用原生浏览器导航，包括垂直下拉刷新手势和水平滑动导航。

none

不会发生到相邻滚动区域的滚动链接，并且阻止默认滚动溢出行为。

描述

默认情况下，移动浏览器倾向于在到达页面（或其他滚动区域）的顶部或底部时提供“反弹”效果甚至页面刷新。您可能还注意到，当您在页面顶部有一个带有滚动内容的对话框，该页面也具有滚动内容时，一旦对话框的滚动边界到达，底层页面将开始滚动——这称为滚动链接。

在某些情况下，这些行为是不希望的。您可以使用 overscroll-behavior 来消除不需要的滚动链接和浏览器启发的 Facebook/Twitter 应用程序的“下拉刷新”型行为。

请注意，此属性仅适用于滚动容器。特别是，由于<iframe>不是滚动容器，因此在 iframe 上设置此属性无效。要控制来自 iframe 的滚动链接，请在 iframe 文档的<html> 和<body> 元素上都设置 overscroll-behavior。

正式定义

初始值auto
应用于非替换块级元素和非替换内联块级元素

继承否
计算值作为每个简写属性的值
动画类型离散

正式语法

overscroll-behavior = 
  [ contain | none | auto ]{1,2}

示例

阻止底层元素滚动

在我们overscroll-behavior 示例（也请查看源代码）中，我们展示了一个包含虚假联系人信息的全页面列表，以及一个包含聊天窗口的对话框。

A popup chat window titled 'Active chat', showing a conversation between Chris and Bob. Behind the chat window is a contact list titled 'overscroll-behavior demo'.

这两个区域都可以滚动；通常情况下，如果您滚动聊天窗口直到到达滚动边界，底层的联系人窗口也会开始滚动，这是不可取的。可以使用聊天窗口上的overscroll-behavior-y（overscroll-behavior 也适用）来阻止这种情况，如下所示

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

我们还希望在联系人滚动到顶部或底部时去除标准的过度滚动效果（例如，Chrome 在 Android 上会在您滚动到顶部边界之外时刷新页面）。可以通过在<html> 元素上设置overscroll-behavior: none 来防止这种情况

css
html {
  margin: 0;
  overscroll-behavior: none;
}

规范

规范
CSS 过度滚动行为模块级别 1
# overscroll-behavior 属性

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅