下拉刷新非HTML5原生API，需第三方库或手写实现；主流方案如pulltorefreshjs、iScroll须注意容器滚动配置与iOS兼容性，手写版需处理touch事件被动限制及回弹动画。
下拉刷新不是原生 API，得靠第三方库或手写逻辑
HTML5 本身不提供 pull-to-refresh 的标准接口，浏览器原生仅在部分 iOS Safari 中有隐式支持（且不可控、无事件、无法禁用），所以实际项目中必须引入 JS 插件或自行实现。主流选择是 pulltorefreshjs、iscroll 或轻量方案如 just-draw-refresh；但要注意：这些库大多依赖容器滚动（overflow: auto），不能作用于 body 全局滚动——否则在 iOS 上会触发原生刷新并打断 JS 逻辑。
pulltorefreshjs 初始化时必须指定可滚动容器
直接对 document.body 调用 PullToRefresh.init() 在多数安卓和新版 iOS 上会失效。正确做法是包裹一层 ，设 height: 100vh; overflow-y: auto;，再初始化：
PullToRefresh.init({
mainElement: '#container',
onRefresh: function() {
fetch('/api/list').then(r => r.json()).then(data => {
renderList(data);
PullToRefresh.done(); // 必须手动调用
});
}
});
常见错误包括：mainElement 选错节点、忘记调用 PullToRefresh.done()（导致加载动画卡住）、未给容器设固定高度和 overflow（导致无法触发滚动监听）。
iScroll 6+ 的 probeType: 3 是下拉刷新关键参数
用 iScroll 实现自定义下拉刷新，核心是监听 scroll 事件中的 y 值变化。但默认 probeType: 1 只在滚动结束时触发，根本捕获不到下拉动作。必须设为 probeType: 3 才能实时获取位置：
立即学习“前端免费学习笔记（深入）”；
const myScroll = new IScroll('#wrapper', {
probeType: 3,
bounce: { top: true } // 允许顶部回弹，否则下拉无效
});
myScroll.on('scroll', function() {
if (this.y > 50) { // 下拉超过 50px
this.refresh(); // 触发自定义刷新 UI
}
});
注意：iScroll 会接管容器滚动，因此原生 scrollTop 失效；所有滚动控制必须通过 myScroll.y 和 myScroll.scrollTo() 进行；iOS 上还需加 preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ } 避免表单元素失焦异常。
手写简易版需防 iOS 15+ 的 touchmove 被阻止
如果项目极轻量，可用原生 JS 实现基础下拉刷新，但必须处理 iOS 的被动事件限制：
- 绑定
touchstart/touchmove时，touchmove的监听器要加{ passive: false } - 在
touchmove中调用event.preventDefault()才能阻止页面滚动，从而让下拉动作生效 - 只在
scrollTop === 0 && touchY > startTouchY时才响应，避免列表中间滚动误触发
真正难的不是拉下来，而是松手后精准判断是否达到阈值并触发请求、同时平滑回弹——这部分动画节奏和 timing function 容易被忽略，结果就是“拉了没反应”或“松手后卡在半空”。
