UD5工具箱
打开工具页面后，首先观察默认状态下的滚动行为。在嵌套滚动场景中，尝试在内层滚动区域中向上和向下滚动。当内层内容滚动到底部或顶部时，继续滚动鼠标滚轮，观察外层页面是否跟随滚动。此时内层和外层的 overscroll-behavior-y 均为默认值 auto，滚动事件会自动「链接」到外层容器。注意页面上显示的滚动链接检测提示，它会告知您当前滚动事件是否发生了链接。
这一步骤的目的是让您直观感受滚动链接的默认行为，理解为什么在某些场景下（如模态框、侧边栏）需要阻止这种链接。
步骤 2切换到 contain 值体验阻止链接
在控制面板中，将内层容器的 overscroll-behavior-y 切换为 contain。再次在内层滚动区域中滚动到底部或顶部，观察外层页面的行为变化。您会发现，外层页面不再跟随滚动，滚动事件被成功「阻止」在内层容器内。然而，内层容器在到达边界时仍然会显示浏览器默认的滚动溢出效果（如 iOS 风格的弹性边缘）。这正是 contain 值的核心特性——阻止滚动链接，但保留默认的边界视觉反馈。
尝试同时观察模态框场景：打开模态框后在其中滚动，背景页面应该不再跟随滚动。这是 contain 值最常见的应用场景。
步骤 3切换到 none 值体验完全阻止
将内层容器的 overscroll-behavior-y 切换为 none。在内层滚动区域中滚动到底部或顶部，观察与 contain 值的区别。此时，不仅外层页面不会跟随滚动，内层容器在到达边界时也不会显示任何默认的滚动溢出效果。滚动事件被完全「截断」，没有任何视觉反馈传递到嵌套的容器中。
none 值适用于需要完全控制滚动行为的场景，例如禁用下拉刷新（body { overscroll-behavior: none }）或在自定义滚动容器中避免任何默认的浏览器行为干扰。
步骤 4使用预设场景快速对比
点击预设场景按钮，快速切换不同的配置组合。「默认行为」将内外层均设为 auto，展示原始的滚动链接效果。「阻止链接」将内层设为 contain，演示最常见的解决方案。「完全阻止」将内层设为 none，展示最大程度的滚动隔离。「模态框最佳实践」模拟 Bootstrap 5.3 的推荐配置——模态框设为 contain，背景页面设为 none。
通过在这些预设之间快速切换，您可以清晰地对比每种配置的效果差异，加深对三个值之间区别的理解。建议反复操作几次，直到能够在不看控制面板的情况下，仅通过滚动行为判断当前的配置状态。
步骤 5查看并复制生成的 CSS 代码
在确定了适合您项目场景的配置后，查看工具自动生成的 CSS 代码。代码会根据您当前的设置实时更新，包含 overscroll-behavior-y 属性的完整声明。点击复制按钮将代码保存到剪贴板，然后粘贴到您的项目样式表中。
生成的代码通常包含两个部分：对滚动容器的 overscroll-behavior-y 设置，以及对背景页面的 overscroll-behavior 设置（如果适用）。建议在实际项目中同时设置这两个部分，以确保滚动隔离的完整性和可靠性。
步骤 6验证浏览器兼容性与实际效果
在复制代码到实际项目之前，建议在多个浏览器中验证效果。overscroll-behavior 在 Chrome 63+、Firefox 59+ 和 Safari 16+ 中均获得支持。对于不支持的旧版浏览器，滚动行为会回退到默认的链接行为，不会导致功能异常或布局问题。使用工具的 FAQ 板块了解更详细的兼容性信息，包括各浏览器的最低支持版本和已知的兼容性注意事项。