下拉刷新需用 position: fixed 定位容器并设 pointer-events: none；内容区用 transform: translatey() 动态偏移，配合 will-change: transform；判断顶部必须用 document.scrollingelement.scrolltop === 0；松手后须在动画完成时同步重置 scrolltop 和 transform；嵌套滚动需 overscroll-behavior: contain 辅助，但核心逻辑依赖 scrolltop === 0 与 deltay > 0 双校验。
下拉刷新容器必须用 position: fixed 脱离文档流
把刷新提示（比如“下拉刷新…”文字）直接塞进列表顶部、靠 margin-top 或 padding-top 推开，是高频错误。它会撑高整个页面高度，导致滚动错位、白屏闪动，iOS Safari 甚至可能触发渲染异常。
正确结构是：刷新容器独立于内容流，用 position: fixed; top: 0; left: 0; width: 100%; height: 60px; 定位；内容区整体加 margin-top: 60px（初始状态），或更推荐用 transform: translateY() 动态移动——后者不触发重排，更顺滑。
- 刷新容器上必须设
pointer-events: none（加载图标区域除外），否则会拦截后续点击和滚动事件 - 若用
transform移动内容区，建议加will-change: transform，尤其在 iOS Safari 下能提升渲染帧率 - 刷新容器
z-index至少为10，避免被其他固定定位元素（如导航栏）遮挡
scrollTop === 0 判断必须基于 document.scrollingElement
直接读 document.body.scrollTop 在 iOS Safari 下几乎总是 0；而 document.documentElement.scrollTop 在部分 Android WebView 中不准。硬写死会导致页面中部也能拉出刷新区——这是最常被忽略的逻辑漏洞。
安全写法是统一取滚动根节点：const scrollEl = document.scrollingElement || document.documentElement，所有判断都基于 scrollEl.scrollTop === 0。
- 监听
touchstart/touchmove时，也要绑定到同一个滚动容器（比如div#feed），而不是document或window - 不要用
scrollHeight - scrollTop === clientHeight这类公式反推是否在顶部——scrollTop可能为负（overscroll 状态），此时才是下拉窗口期
松手后必须手动重置 scrollTop 和 transform
很多实现只管“拉”，不管“收”：松手触发刷新后，没重置滚动位置，下次再下拉时 scrollTop 已非 0，导致无法再次进入“可下拉”状态。
刷新完成回调里必须显式归零：scrollEl.scrollTop = 0（注意不是 scrollTo(0, 0)，后者在某些 WebView 中会被忽略）；如果用了 transform: translateY() 移动内容区，也要同步清空该样式。
- 重置操作必须放在动画回弹完成之后执行，否则用户会看到“刷完又自动滚回顶部”的突兀效果
- 务必监听
touchcancel事件，并视同touchend处理——iOS Safari 快速下拉松手时容易触发它，不处理会导致状态丢失
嵌套滚动容器要防事件穿透，overscroll-behavior: contain 是辅助项
当列表本身在一个 overflow-y: auto 的父容器里（比如 tab 页面中的子页），手指在子容器内下拉，容易误触发父容器的原生 overscroll，干扰手势识别。
可在子滚动容器上设 overscroll-behavior: contain，禁用其弹性回弹。但它不兼容 IE 和旧版 Android WebView，iOS Safari 支持良好（截至 2026 年 5 月）。
- 这只是一个缓解手段，不能替代
scrollTop === 0+deltaY > 0的双重校验逻辑 - 真正关键的还是在 touchmove 中只对满足条件的场景调用
event.preventDefault()，其余时候放行原生滚动
实际最难缠的点不在布局本身，而在「什么时候该阻止默认行为」——阻止早了，页面不能滚动；阻止晚了，下拉动作被系统吞掉。这个临界点必须靠 scrollTop === 0 和持续向下的 deltaY 共同锁定，缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
