HTML中元素的滚动溢出影响其父级元素的滚动-overscroll-behavior

overscroll-behavior

-ms-scroll-chaining

.element {
  overscroll-behavior: none;
  -ms-scroll-chaining: contain;
}

overscroll-behavior 是一个 CSS 属性，用于控制元素在滚动到边界时的滚动行为。

该属性可以应用于任何具有滚动内容的元素，例如滚动容器（如 div）或滚动区域（如 iframe）。

常用的 overscroll-behavior 值有以下几种：

• auto：默认值。启用浏览器的默认滚动行为。
• contain：禁止元素的滚动溢出影响其父级元素的滚动。
• none：禁止元素的滚动溢出。
• inherit：继承父级元素的 overscroll-behavior 值。
• initial：将 overscroll-behavior 属性重置为其默认值。

例如，要禁止元素的滚动溢出效果，可以将 overscroll-behavior 设置为 none，如下所示：

.element {
  overscroll-behavior: none;
}

这样，当用户在滚动元素时，不会出现滚动溢出的效果。

请注意，overscroll-behavior 属性的浏览器兼容性可能有所不同，具体取决于所使用的浏览器和版本

---

-ms-scroll-chaining 是一个 CSS 属性，用于控制滚动事件在元素和其父级滚动容器之间的链接行为。

该属性仅适用于 Microsoft Edge 浏览器，用于控制滚动事件的链接方式。

常用的 -ms-scroll-chaining 值有以下几种：

• chained：默认值。滚动事件会链接到父级滚动容器，即在滚动到边界时，滚动事件会传递给父级容器进行处理。
• none：滚动事件不会链接到父级滚动容器，即在滚动到边界时，滚动事件不会传递给父级容器，而是在元素内部滚动。

例如，要禁止滚动事件链接到父级滚动容器，可以将 -ms-scroll-chaining 设置为 none，如下所示：

.element {
  -ms-scroll-chaining: none;
}

这样，当用户在滚动元素时，滚动事件将仅在元素内部进行处理，不会传递给父级容器。

注意，-ms-scroll-chaining 属性仅适用于 Microsoft Edge 浏览器，其他浏览器不支持该属性。在编写跨浏览器兼容的代码时，请考虑使用其他滚动事件相关属性或 JavaScript 来实现所需的滚动行为。