免费在线CSS滚动边界生成器，可视化调整overscroll-behavior参数，控制滚动链行为、阻止下拉刷新、优化模态框滚动体验。一键复制CSS代码。纯前端处理。 | 无需注册 · 数据绝不上传服务器
零依赖·可离线使用🔄 CSS滚动边界生成器
Updated: 2026-07-11
⚙️ 滚动行为设置
控制滚动边界行为，防止页面滚动链（scroll chaining）和下拉刷新。
👁️ 实时预览
尝试在下方向下滚动到边界，观察 overscroll 行为变化。右侧主页面不会跟着滚动。
contain
📌 尝试向下滚动
当内容滚动到底部时，overscroll-behavior: contain 会阻止继续滚动到页面。
💡 overscroll-behavior 控制滚动链行为，防止内部滚动触发页面滚动。
🔹 auto — 默认，允许滚动传播到父元素
🔹 contain — 阻止滚动链，但保留弹性效果
🔹 none — 完全阻止滚动溢出效果
⬇️ 滚动到最底部，感受不同模式的区别。
— 到底了 —
💻 CSS代码
📖 CSS overscroll-behavior 详解
overscroll-behavior 属性控制当滚动容器到达滚动边界时的行为。它解决了常见的「滚动链」问题——当内部滚动元素到达边界后继续滚动会触发父页面滚动。
典型应用场景
- 模态框/侧边栏内滚动，防止背景页面跟着滚动
- 聊天窗口/消息列表阻止下拉刷新
- 全屏滚动页面防止 Chrome 的触控板翻页效果
- 嵌入式 iframe 或小部件内滚动控制