无需登录 数据私有 本地保存

CSS overscroll-behavior 演示 - 控制滚动链接效果

CSS 开发工具 CSS overscroll-behavior 滚动 演示
13
0
0
0
术语定义与说明
overscroll-behaviorCSS 属性，用于控制当滚动容器到达其滚动边界（顶部或底部）时，是否将滚动事件传递给嵌套的父级滚动容器。该属性是 CSS Overflow Level 4 规范的一部分，提供了对滚动链接行为的精确控制能力。
滚动链接（Scroll Chaining）当用户在一个嵌套的滚动容器中滚动到边界后，继续滚动会导致外层容器也开始滚动的默认浏览器行为。这种行为在某些场景下（如模态框）是不期望的，overscroll-behavior 属性正是用于阻止这种链接。
autooverscroll-behavior 的默认值。在此设置下，当滚动容器到达边界时，滚动事件会正常传递给父级容器，即滚动链接行为保持不变。适用于不需要特殊处理的常规滚动场景。
containoverscroll-behavior 的值，用于阻止滚动事件传递给父级容器（阻止滚动链接），但保留浏览器默认的边界视觉效果（如弹性边缘或 overscroll 指示器）。这是模态框和侧边栏等 UI 组件的推荐设置。
noneoverscroll-behavior 的值，不仅阻止滚动事件传递给父级容器，还完全禁用浏览器默认的边界视觉效果（如弹性边缘、下拉刷新触发等）。适用于需要最大程度控制滚动行为的场景。
overscroll-behavior-x / overscroll-behavior-yoverscroll-behavior 的长hand 属性，分别控制水平方向和垂直方向的滚动链接行为。使用这些属性可以对不同方向的滚动行为进行独立设置，提供更精细的控制能力。
overscroll-behavior-inline / overscroll-behavior-blockCSS 逻辑属性，分别对应书写模式中的内联轴和块轴方向的滚动行为控制。这些属性适应不同的书写模式（如从右到左的阿拉伯语布局），确保在国际化场景中也能正确控制滚动行为。
滚动溢出效果（Overscroll Effect）当滚动容器到达边界时，浏览器显示的视觉反馈效果，如 iOS 的弹性边缘（rubber band）效果、Android 的蓝色辉光（glow）效果。overscroll-behavior: contain 保留这些效果，而 overscroll-behavior: none 则完全禁用它们。
嵌套滚动容器（Nested Scroll Containers）指一个滚动容器被另一个滚动容器包裹的 DOM 结构。在这种结构中，内层容器滚动到边界时的默认行为会触发外层容器的滚动，形成滚动链接。这是 overscroll-behavior 属性主要解决的场景。
模态框滚动隔离（Modal Scroll Isolation）在模态框打开时，确保用户在模态框内的滚动操作不会影响背景页面的滚动行为。这是 overscroll-behavior 属性最典型的应用场景，Bootstrap 5.3 及后续版本已默认为模态框设置 overscroll-behavior: contain 以实现此效果。
CSS Overflow Level 4 规范W3C 发布的 CSS 溢出处理规范的第四个层级，其中定义了 overscroll-behavior 属性的标准化语法和行为。该规范为不同浏览器提供了统一的实现标准，确保了跨浏览器的一致性。
下拉刷新（Pull-to-Refresh）移动端浏览器的一种常见交互手势：在页面顶部向下拉拽以刷新页面内容。overscroll-behavior: none 可以禁用此行为，防止在特定场景下（如全屏应用、模态框）意外触发页面刷新。
🔧 相关工具