结论：overscroll-behavior: none 失效主因是作用于不可滚动元素或滚动行为未触发；它仅对实际可滚动容器生效，需确保元素有 overflow 且滚动链完整，否则属性被静默忽略。

直接说结论：加了 overscroll-behavior: none 却没用，90% 是因为写在了不可滚动的元素上，或者该元素压根没触发滚动行为。

为什么 overscroll-behavior 写对了却完全不生效

这个属性只对「实际可滚动的容器」起作用——不是指“看起来能滚”，而是浏览器真把它当滚动容器处理。常见失效场景包括：

• 给 .modal（position: fixed 容器）直接设 overscroll-behavior: none → 它通常没 overflow，属性被静默忽略
• 内容区高度不足，未溢出 → 没滚动条，自然不进入“滚到边界”的判断逻辑
• 父级或祖先用了 transform、will-change 或 backface-visibility → iOS Safari（15–16）会破坏滚动链路识别，属性失效
• Flex/Grid 布局中子元素撑高，但父容器没设 min-height: 0 或 overflow: hidden → 高度计算异常，滚动行为不可控

overscroll-behavior: contain 和 none 怎么选

二者都阻断向上传播，区别只在本地反馈：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• contain：允许 iOS 的弹性回弹（橡皮筋）、Android 的 glow 效果，仅切断事件冒泡 → 更适合弹窗内列表，保留原生手感
• none：连本地回弹也禁掉，滚到顶/底就硬停 → 适合地图、画布、自定义下拉刷新等需彻底隔离的场景
• 别用 auto：这是默认值，就是你正在被穿透的那个状态

移动端 Safari 兼容性兜底必须做

iOS 16.4+ 支持稳定，但旧版（尤其是 15.x）仍常失效。不能只靠 CSS：

• 确保 overscroll-behavior 设在**实际可滚动的内容区**，例如：.modal__scroller { overflow-y: auto; overscroll-behavior: contain; }
• 若仍穿透，配合传统降级：弹窗打开时临时加 body { position: fixed; top: -${window.scrollY}px; }，关闭时还原
• 避免在模态框层级使用 transform: translateZ(0) 类 hack —— 它会创建新层叠上下文，干扰滚动链识别

真正容易被忽略的一点是：这个属性不控制“能不能滚动”，只干预“滚到头之后怎么办”。如果内容没溢出、容器没设 overflow、或者滚动链被 transform 断开，再怎么写 none 都只是摆设。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！