UD5工具箱
嵌套滚动场景演示
工具提供了一个精心设计的嵌套滚动容器：内层滚动区域被外层滚动区域包裹。当内层内容滚动到边界时，您可以直观地观察到滚动事件是否「泄漏」到外层容器。这一场景模拟了实际开发中最常见的滚动链接问题，帮助您理解 overscroll-behavior 属性的核心作用。
模态框场景演示
模态框是 overscroll-behavior 最典型的应用场景之一。工具内置了模态框演示，当您在模态框内容中滚动到底部时，可以清楚地看到背景页面是否跟随滚动。切换 overscroll-behavior 设置后，模态框的滚动隔离效果将立即呈现，让您深刻理解为什么 Bootstrap 5.3 会默认为模态框设置 overscroll-behavior: contain。
实时控制面板
工具的控制面板支持对内层和外层容器的 overscroll-behavior-y 值进行独立切换，提供 auto、contain、none 三个选项。每次切换都会即时生效，无需刷新页面。这种实时反馈机制让您能够快速对比不同配置组合的效果差异，找到最适合特定场景的设置方案。
预设场景快速切换
工具预设了四种常见场景：默认行为（内外均为 auto）、阻止链接（内层 contain）、完全阻止（内层 none）、模态框最佳实践（模态框 contain + 背景 none）。一键切换即可体验不同场景下的滚动行为，省去手动配置的繁琐步骤，同时为实际项目提供经过验证的配置方案。
滚动链接检测提示
当滚动事件发生链接时，工具会显示明确的检测提示，告知用户当前的滚动行为状态。这一功能帮助用户确认滚动链接是否被成功阻止，避免在实际项目中因配置不当而导致意外的滚动行为。检测提示与视觉演示相结合，提供了双重验证机制。
CSS 代码生成与复制
根据您当前的配置，工具会自动生成对应的 CSS 代码片段，包含完整的 overscroll-behavior 属性设置。点击复制按钮即可将代码粘贴到您的项目中。生成的代码遵循最佳实践，包含必要的注释和兼容性说明，确保您能够安全地在生产环境中使用。
全方位 FAQ 知识库
工具内置了七个精心编写的常见问题解答，涵盖 overscroll-behavior 的定义、使用场景、值的区别、浏览器兼容性、与下拉刷新的关系、逻辑属性支持以及与 Bootstrap 框架的集成。每个问题都提供了详尽的技术解释和代码示例，帮助您建立完整的知识体系。