CSS overscroll-behavior 滚动链
overscroll-behavior：contain阻止滚动链接（弹窗内滚动不传播到body）、none禁止过度滚动橡皮筋效果、auto默认、防止iOS橡皮筋弹跳、滚动容器边界控制 · 难度：入门 · +10XP
CSS overscroll-behavior —— 滚到尽头后的行为控制
在手机浏览器中，滚到页面顶部或底部时会触发"橡皮筋弹跳效果"。在弹窗或侧边栏内部，这个效果会导致滚动传播到背后的页面——弹窗滚到底后，背景页面开始滚动。overscroll-behavior就是解决这个的。
阻止滚动传播
.modal-content {
overscroll-behavior: contain; /* 滚动到尽头不传播到父元素 */
}三个值对比
| 值 | 行为 |
|---|---|
| auto | 默认：滚到尽头触发橡皮筋/下拉刷新 |
| contain | 阻止滚动传播到父元素，但保留本地橡皮筋 |
| none | 完全禁用橡皮筋和传播 |
动手练习
- 基础练习：做一个弹窗，内部有滚动内容，设置overscroll-behavior:contain防止滚动传播到页面。
- 进阶应用：在移动端禁用某个区域的下拉刷新手势。
- 项目实战：给网站中所有弹窗、侧边栏、下拉面板加overscroll-behavior:contain。