下拉刷新需作用于预览容器而非document，正确监听其touch事件、判断自身scrolltop、用wrapper元素做transform位移、设overscroll-behavior并降级，确保dom布局与滚动上下文一致。
HTML编辑器里做网页下拉刷新，不是给编辑器本身加功能，而是确保它渲染出的预览区域（比如一个 div#preview 或 iframe）能正确响应下拉手势——否则用户在编辑器里点“预览”，看到的还是不能下拉的静态页面。
监听目标必须是预览容器，不是 document
常见错误是把 touchstart/touchmove 直接绑在 document 上。编辑器通常用 iframe、shadow DOM 或独立滚动容器隔离预览内容，事件根本传不进去，或者监听到的是编辑器界面本身的滚动。
- 找到真实可滚动的预览节点，例如
document.getElementById('preview')或iframe.contentDocument.body - 给该节点设
overflow-y: auto且内容高度 > 容器高度，否则 touchmove 不会触发 - 绑定事件时加
{ passive: false }，否则 iOS Safari 会忽略event.preventDefault() - 若用 iframe，需确保同源，否则无法访问其
contentDocument；跨域要用 postMessage + 内部脚本配合
scrollTop 判断必须基于容器自身，不能用 window.scrollY
编辑器预览区往往是局部滚动，window.scrollY 始终为 0，而真正决定是否允许下拉的是预览容器自身的 scrollTop。错用会导致永远无法触发，或在滚动中途误触发。
- 在
touchstart里读container.scrollTop，不是document.documentElement.scrollTop -
touchmove中只在container.scrollTop === 0 && deltaY > 0时更新下拉位移，否则直接 return - 松手后判断阈值前，再查一次
container.scrollTop，防止期间有其他脚本修改了它
transform 回弹动画必须作用于容器子元素，不能动 container 自身
对滚动容器本身设 transform: translateY() 会破坏其滚动上下文，导致后续 touchmove 计算偏移错乱、滚动卡顿，甚至触发浏览器重绘 bug。
- 在预览容器内插入一个 wrapper 元素（如
<div class="preview-wrapper">），所有内容放里面 <li>下拉时只改 wrapper 的 <code>transform: translateY(${offset}px)，保持 container 的 scrollTop 和尺寸稳定 - 回弹动画用
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)，松手后才加上 transition - 动画结束立即清除
transform并重置状态变量，避免下次 touchstart 读到脏值 - 给预览容器加
overscroll-behavior-y: contain，同时加-webkit-overflow-scrolling: touch提升 iOS 流畅度 - 降级逻辑：检测是否支持
overscroll-behavior，不支持时，在touchmove中主动e.preventDefault()拦截 overscroll - 注意嵌套滚动：如果预览容器里还有列表组件（如聊天记录），它们的
overscroll-behavior也得设为contain，否则会穿透触发外层下拉
overscroll-behavior 要设在 container 上，但得备降级方案
overscroll-behavior: contain 能禁掉 iOS Safari 那个原生灰色条，让自定义下拉更干净。但它不支持 IE、旧版 Android WebView，且在 iframe 里可能被忽略。
最易被忽略的点是：下拉刷新区域（header）和内容 wrapper 必须属于同一滚动上下文，且 wrapper 的 height 必须由内容撑开——一旦你用 JavaScript 动态改了列表高度，但忘了调 container.style.height = 'auto' 或触发 resize，下拉位移计算就会漂移。这不是手势逻辑错了，是 DOM 布局没对齐。
