CSS overscroll-behavior 滚动边界
CSS overscroll-behavior：控制滚动到边界时的默认行为、contain阻止滚动链/auto允许/ none禁止下拉刷新、解决弹窗背景滚动穿透问题 · 难度：进阶 · +15XP
CSS overscroll-behavior —— 控制滚到尽头后的行为
在手机浏览器中，滚到页面底部时会触发"橡皮筋效果"（页面整体弹跳）。在某些场景下，这个效果很烦人——比如弹窗内的滚动不应该传播到页面。
阻止滚动链
.modal-content {
overscroll-behavior: contain; /* 滚动到尽头不传播到父元素 */
}三个值
| 值 | 效果 |
|---|---|
| auto | 默认，滚到尽头触发橡皮筋/下拉刷新 |
| contain | 阻止滚动传播，但保留橡皮筋效果 |
| none | 完全阻止滚动传播和橡皮筋效果 |
动手练习
- 基础练习：做一个弹窗，内部有滚动内容，设置overscroll-behavior:contain防止滚动传播。
- 进阶应用：在聊天应用的"下拉加载历史消息"区域用overscroll-behavior。
- 项目实战：给网站中所有弹窗、侧边栏、下拉面板加overscroll-behavior:contain。