overscroll-behavior在iOS 16.4前完全不支持，常见失效原因：写在html/body上被忽略、目标元素未设overflow、被fixed/transform等创建独立滚动上下文。

overscroll-behavior 在 iOS 16.4 之前完全不生效，老版本 Safari 对它视而不见；不是你写错了，是浏览器根本不认。

为什么 overscroll-behavior 加了也没用

常见失效原因就三个，按出现频率排序：

• overscroll-behavior 写在 body 或 html 上 —— iOS 和部分安卓 WebView 明确忽略根元素的该属性
• 目标元素没设 overflow-y: auto（或 scroll）—— 该属性只对「真正可滚动」的元素起作用，overflow: hidden 或未声明 overflow 都无效
• 元素被 position: fixed、transform 或 will-change 包裹，导致浏览器创建了独立滚动上下文，样式规则被绕过

touchmove + preventDefault() 怎么写才不翻车

JS 方案不是不能用，但必须满足两个硬条件：passive 为 false，且只在真正触达边界时拦截。否则会直接废掉所有滚动惯性。

Wjs Uploading Video

将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。

下载

• 监听必须用 { passive: false }，iOS 上 passive: true（默认）会让 preventDefault() 失效
• 不能无脑 e.preventDefault()，得先判断是否已到顶/底：el.scrollTop === 0 || el.scrollTop >= el.scrollHeight - el.clientHeight
• 避免监听 document 全局，应绑定到具体滚动容器，防止误杀弹窗外的正常滚动
• 记得在组件卸载或弹层关闭时调用 removeEventListener，否则内存泄漏+手势残留

overscroll-behavior: contain 和 none 的实际区别

很多人以为 none 就是“更强的 contain”，其实语义完全不同：

立即学习“前端免费学习笔记（深入）”；

• contain：允许本层橡皮筋（比如弹层自己拉出一点回弹），但阻止滚动事件传给父级 —— 最适合模态框、下拉菜单
• none：既禁本层回弹，也禁传播，还可能干扰键盘唤起时的自动滚动 —— 仅适用于游戏画布、全屏编辑器等强隔离场景
• 横向/纵向要分开控制？用 overscroll-behavior-x: contain; overscroll-behavior-y: none，别堆在一起写

最常被忽略的一点：很多页面的“橡皮筋”根本不是子容器引起的，而是 body 自己在滚动 —— 检查是否内容高度不足一屏，导致 body 成了实际滚动体。这时候修容器没用，得先 fix 布局高度。