局部容器启用触摸滑动必须设置 overflow-y: scroll 和 -webkit-overflow-scrolling: touch，高度需固定，且避免 pointer-events: none；自定义滑动需在 touchmove 中 preventDefault 并手动更新 transform，同时安全读取 touches 坐标。
局部容器启用触摸滑动必须加 overflow-y: scroll 且禁用默认弹性效果
只靠 touchstart/touchmove 绑定事件，不设置 CSS，滑动一定无效。关键在于：容器必须是「可滚动的」，而移动端浏览器默认对非 body 元素禁用原生滚动（除非显式声明）。
常见错误是只写 overflow: auto 却漏掉 -webkit-overflow-scrolling: touch，导致 iOS 上卡顿或完全不响应。
正确写法示例：
.scroll-area {
height: 200px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch; /* iOS 流畅滚动必需 */
}- 高度必须固定（或由父容器约束），否则
overflow不触发 - 不要用
overflow: hidden或未设高度的min-height容器包裹 - 如果父级有
pointer-events: none，子元素触摸事件会被拦截
用 touchmove 阻止默认行为才能自定义滑动逻辑
想自己计算位移、做回弹、联动动画？那必须在 touchmove 里调用 event.preventDefault()。但注意：它会同时禁用原生滚动——所以得二选一：要么纯原生滚动（推荐），要么纯手动实现（复杂度高）。
典型误操作：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
el.addEventListener('touchmove', e => {
e.preventDefault(); // ✅ 禁用原生滚动
// 但下面没写任何位移更新逻辑 → 页面彻底不能滑了
});- 若只需原生滑动，CSS 设置好就不用绑任何事件
- 若要自定义（如拖拽排序、横向轮播），必须手动更新
transform: translateY()并记录起始/移动差值 -
touchmove中频繁操作 DOM 会导致卡顿，优先用transform+will-change: transform
touchstart/touchend 里不存 touches 引用会拿错坐标
很多代码直接在 touchstart 存 e.touches[0]，但这个对象是实时引用，到 touchmove 时可能已变。iOS 尤其容易出问题——手指悬停瞬间 touches 长度归零，再取 [0] 就是 undefined。
安全做法是立刻解构保存数值：
let startY = 0;
el.addEventListener('touchstart', e => {
startY = e.touches[0].clientY; // ✅ 立即读值
});
el.addEventListener('touchmove', e => {
const currentY = e.touches[0]?.clientY || 0; // ✅ 加空值检查
const diff = currentY - startY;
});- 永远别对
e.touches做跨事件引用 - Android 和 iOS 的
touches行为略有差异，加?.clientY防崩 - 需要惯性滑动？得在
touchend记录速度，用requestAnimationFrame模拟衰减，不是简单设个定时器
微信内嵌 WebView 对 touch 事件有额外拦截
在微信浏览器中，如果容器外层有 position: fixed 导航栏或蒙层，常导致内部 touch 事件无法触发。这不是代码 bug，而是微信为了防止「误触返回」主动丢弃部分触摸流。
- 临时验证方式：给容器加
style="border: 1px solid red"，确认是否真被遮挡 - 解决方案优先用 CSS：给上层 fixed 元素加
touch-action: none，或给滑动区域加touch-action: pan-y - 避免在
touchstart里做异步操作（如fetch），微信可能在等待响应时吞掉后续touchmove
实际最稳的路径是：先用纯 CSS 实现滚动，只有当需要手势识别（比如左滑删除、长按拖拽）时，才介入事件。手写滑动引擎的边界情况太多，连 passive: false 的兼容写法都得反复测。
