CSS | overscroll-behavior-x 属性

CSS 的 overscroll-behavior-x 属性用于控制当滚动时内容区域的外部滚动区域（例如浏览器窗口）滚动到其最边界时，该如何表现。它主要用于解决一些想要定制边界行为的页面，例如 Web 应用程序或游戏。

语法

overscroll-behavior-x: auto | contain | none;

• auto：开启 overscroll-behavior-x，使行为与基础滚动行为相同。
• contain：阻止 overscroll-behavior-x，使外部区域在内容区域边界内的滚动行为被包含在内容区域内。
• none：阻止 overscroll-behavior-x，使外部区域的滚动行为不会影响内容区域。

注意事项

• overscroll-behavior-x 属性需要一个明确的值。如果你只想控制 overscroll-behavior-x，而不是 x 和 y 轴同时，请使用 overscroll-behavior-y 属性。
• overscroll-behavior-x 属性只应用于拥有 overflow-x 属性的元素。

示例

开启 overscroll-behavior-x

.box {
  overflow-x: scroll;
  overscroll-behavior-x: auto;
}

包含外部滚动区域的滚动行为

.box {
  overflow-x: scroll;
  overscroll-behavior-x: contain;
}

阻止外部滚动区域的滚动行为

.box {
  overflow-x: scroll;
  overscroll-behavior-x: none;
}

结语

CSS 的 overscroll-behavior-x 属性为开发者提供了更细致的滚动控制和页面设计。通过对比示例，我们可以清晰地了解到每个值的作用，并能更好的应用于实际开发中。