🔄 CSS滚动边界生成器

⚙️ 滚动行为设置

控制滚动边界行为,防止页面滚动链(scroll chaining)和下拉刷新。

👁️ 实时预览

尝试在下方向下滚动到边界,观察 overscroll 行为变化。右侧主页面不会跟着滚动。

contain
📌 尝试向下滚动 当内容滚动到底部时,overscroll-behavior: contain 会阻止继续滚动到页面。
💡 overscroll-behavior 控制滚动链行为,防止内部滚动触发页面滚动。
🔹 auto — 默认,允许滚动传播到父元素
🔹 contain — 阻止滚动链,但保留弹性效果
🔹 none — 完全阻止滚动溢出效果
⬇️ 滚动到最底部,感受不同模式的区别。
— 到底了 —

💻 CSS代码

📖 CSS overscroll-behavior 详解

overscroll-behavior 属性控制当滚动容器到达滚动边界时的行为。它解决了常见的「滚动链」问题——当内部滚动元素到达边界后继续滚动会触发父页面滚动。

典型应用场景