CSS | overscroll-behavior-y 属性

overscroll-behavior-y 属性控制垂直方向上的滚动条滚动到底部（或顶部）时的行为。它可以用于防止页面在滚动时出现默认的“异步滚动”。

语法

scroll-behavior-y: none | auto | [ contain | none | normal ];

• none：禁止超出内容边界滚动，但仍允许默认的“异步滚动”。
• auto：默认值，允许“异步滚动”和超出滚动范围的滚动。
• contain：内容区域整个被滚动，而不是每个元素单独滚动。也不允许超出内容边界滚动，但不允许默认的“异步滚动”。
• none：禁止超出内容边界滚动，且禁止默认的“异步滚动”。

实例

以下示例演示了 overscroll-behavior-y 属性的不同值：

.container {
    overscroll-behavior-y: none; /* 不允许任何滚动 */
}

.container {
    overscroll-behavior-y: auto; /* 允许默认滚动 */
}

.container {
    overscroll-behavior-y: contain; /* 不允许超出边界滚动 */
}

.container {
    overscroll-behavior-y: none; /* 不允许任何滚动 */
}

以上代码块将分别设置 overscroll-behavior-y 的值为 none、auto、contain 和 none。

浏览器兼容性

overscroll-behavior-y 属性处于试验性阶段，并且仅适用于最新的浏览器版本。

根据 caniuse.com的数据，截至2021年9月，此属性支持率如下：

• Chrome：84.49%
• Firefox：72.58%
• Safari：14.76%
• Opera：75.89%
• Edge：84.49%

结语

现在你了解了 overscroll-behavior-y 属性的用法和语法，你可以通过使用它来更好地控制你的网站的滚动行为。然而，由于该属性存在浏览器兼容性问题，因此在实际使用时要多加注意。