<p>列表项父容器必须设 position: relative 以确保 absolute 删除按钮相对其定位，且加 overflow: hidden 防止按钮滑出边界、撑开布局或触发横向滚动；right 初始值须精确等于按钮宽度（如 --delete-width: 60px，right: calc(-1 * var(--delete-width))），内容层无需 position: absolute，应通过 transform 移动以保障可访问性与性能。</p>
列表项父容器为什么必须设 position: relative 且加 overflow: hidden
不设 position: relative，absolute 删除按钮会相对于 body 或最近已定位祖先定位，导致所有按钮堆在页面左上角或错位；不加 overflow: hidden，滑动时按钮直接伸出容器边界，可能撑开布局、触发横向滚动条，甚至遮挡相邻项。
常见错误现象包括：滑动后右侧留白、按钮悬在列表外、松手回弹异常、iOS Safari 中 touch 事件响应延迟。
-
overflow: hidden必须加在列表项（如.item）上，不能只加在ul或body - 若列表项本身用了
transform（如translateZ(0)），会意外创建新的包含块，使absolute按钮相对它定位——这是旧版 Chrome/Firefox 和部分 Android WebView 的兼容性坑 - 推荐搭配
will-change: transform（仅在滑动中动态添加，滑动结束移除），防闪烁但避免全局滥用
right 初始值怎么算才不露馅
删除按钮的 right 初始值不是随便填个负数，它必须精确等于按钮自身宽度（含 padding、border，不含 margin）。例如按钮 CSS 宽度为 60px，且 box-sizing: border-box，那就设 right: -60px；若误用 right: -100%，父容器宽度变化（比如横屏/字体缩放）时按钮立刻错位。
图标内文字或 SVG 若有 line-height 或 vertical-align，视觉上会偏移，建议用 display: flex; align-items: center; justify-content: center 居中，而非依赖 top: 50%; transform: translateY(-50%)。
立即学习“前端免费学习笔记（深入）”；
- 用 CSS 变量统一管理：
--delete-width: 60px，然后right: calc(-1 * var(--delete-width)) - 避免给按钮设
width: 100%或max-width，否则计算宽度不可靠 - 若按钮含图标字体（如 Font Awesome），注意其
font-size和line-height对实际占位的影响
内容层要不要也设 position: absolute
不需要。内容区域（文字、图片等）保持默认 static 或显式设 position: relative 即可。靠 JS 控制其 style.transform = 'translateX(-60px)' 移动，比改 left 或 margin 更性能友好，也不影响文档流。
强行给内容层加 absolute 会导致：文本无法选中、键盘焦点丢失、屏幕阅读器跳过、iOS Safari 中 touchstart 响应变慢，甚至与某些框架（如 React Native Web）的事件系统冲突。
- 滑动过程中给内容层加
touch-action: pan-y，防止手指横向滑动时误触发页面上下滚动 - 若需兼容 IE10+，补
-ms-transform，但不要混用left和transform，否则动画跳变 - 过渡必须写全：
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)，这个贝塞尔曲线比ease更跟手
为什么滑动结束常卡在半路、松手没回弹
核心是没做“阈值判断 + 回弹逻辑”。仅靠 touchstart/touchend 开关式控制，无法识别滑动速度和方向，导致拖拽断裂、飞走或悬停。
实操上必须在 touchmove 中实时计算位移差值，并在 touchend 中判断是否超过像素阈值（如 80px）和最小触发位移（如 10px），再决定是完全展开还是归零回弹。
- 多个列表项同时滑动错乱？说明事件委托未隔离——
touchstart中必须绑定到当前.item元素，而不是全局监听 - 横向滑动时页面意外滚动？
touchmove中漏了event.preventDefault() - 回弹动画要用
transform+transition，别用left，否则低端安卓机卡顿明显
最易被忽略的是：滑动容器的 overflow: hidden 在部分旧版 Android WebView 中需配合 will-change: transform 才真正生效；还有按钮的 right 值若依赖 JS 动态读取 offsetWidth，要注意 DOM 渲染时机，避免取到 0。
