closest本身不解决嵌套滚动冲突，需结合touchmove事件拦截与边界检测：用closest('[data-scrollable="true"]')定位合法容器，未命中则preventDefault阻止外层滚动，命中后检查scrollTop边界并按需交还滚动权。
直接用 closest 本身并不能解决嵌套滚动条冲突——它只是 DOM 查找方法，不处理滚动逻辑。真正起作用的是结合 closest 快速定位目标容器后，再针对性地禁用外层滚动或接管事件流。核心思路是：**在内层可滚动区域触发 touchmove 时，精准识别它是否属于你允许滚动的“合法区域”，如果不是，就阻止外层滚动；如果是，就确保它能顺畅滚动而不带动页面整体位移。**
用 closest 锁定合法滚动容器
很多 H5 页面结构嵌套深（比如弹层里套列表、卡片里含横向滑块），不能简单靠 class 名硬匹配。这时用 closest 可以从当前触摸元素向上查找最近的、带特定 data 属性或 class 的滚动容器，避免误判。
- 给所有「应该独立滚动」的区域统一加
data-scrollable="true"，例如：<div class="list" data-scrollable="true">...</div> - 在
touchmove事件中，用event.target.closest('[data-scrollable="true"]')判断当前操作是否落在合法滚动区 - 如果返回
null，说明用户正在拖动非滚动区（如背景、标题栏），此时调用event.preventDefault()阻止 body 滚动
配合 touchstart/touchmove 精准拦截
仅靠 CSS 的 overflow: hidden 或 overscroll-behavior 在 iOS 和部分 WebView 中并不可靠，必须用 JS 主动干预事件流。
- 在
touchstart记录初始 Y 坐标：startY = e.touches[0].pageY - 在
touchmove中计算偏移量deltaY = e.touches[0].pageY - startY - 用
closest找到最近滚动容器后，检查它是否已到顶部/底部：el.scrollTop === 0 && deltaY > 0或el.scrollHeight - el.scrollTop - 若已到边界且继续往该方向拖，则
preventDefault，把滚动权交还给外层
避免影响其他交互的细节处理
直接全局 preventDefault 会干掉点击、长按等行为，必须区分手势意图。
- 只在明确检测到纵向滑动（
Math.abs(deltaY) > Math.abs(deltaX)）时才干预 - 对
input、textarea、button等原生可聚焦元素，跳过拦截逻辑 - 使用
passive: false注册事件，确保preventDefault生效：el.addEventListener('touchmove', handler, { passive: false })
补充：CSS 层面必须同步配合
closest 解决的是 JS 事件分发问题，但底层布局仍需合理，否则滚动容器根本不会产生局部滚动。
- 外层容器（如
.app-wrapper）设height: 100vh; display: flex; flex-direction: column; - 中间内容区用
flex: 1; overflow: hidden;，让子元素撑开但不溢出 - 滚动区域自身设
overflow-y: auto; -webkit-overflow-scrolling: touch; - 加
overscroll-behavior: contain;防止 iOS 橡皮筋穿透
