左滑菜单必须用 position: fixed 定位，挂载于 body 下同级结构，配合 transform: translateX() 实现 GPU 加速滑动，禁用 left/margin-left 避免重排，需 touch 事件监听拖拽并阻止默认行为。
左滑菜单的 DOM 结构必须用 position: fixed 定位
移动端左滑菜单（常称“侧边栏”或“抽屉菜单”）本质是脱离文档流、覆盖在主内容之上的独立区域。如果用 float 或普通 relative 定位，滑动时会受父容器约束、触发重排、甚至被其他元素遮挡。只有 position: fixed 能保证它始终锚定视口左边缘，且不随页面滚动偏移。
常见错误是把菜单放在 .main-content 内部，结果滑动时整个页面抖动或菜单被裁剪。正确做法是让它和主内容同级，都挂载在 <body> 下：
<body> <nav class="sidebar"></nav> <main class="content"></main> </body>
- 菜单初始状态设为
left: -100vw（完全移出视口），而非display: none—— 后者会导致 Flex 布局重新计算，动画卡顿 - 主内容区域需加
transform: translateX(0)初始值，否则 iOS Safari 中动画可能失效 - 务必加
will-change: transform提升合成层，避免安卓低端机掉帧
transform: translateX() 是唯一可靠滑动方式
CSS 动画中，left + transition 在移动端有严重兼容问题：iOS 旧版 Safari 会触发重排，安卓 WebView 可能跳变；margin-left 更糟，会引发连续 layout。而 transform: translateX() 仅触发 GPU 合成，无重排开销，且支持硬件加速。
示例关键样式：
立即学习“前端免费学习笔记（深入）”；
.sidebar {
position: fixed;
top: 0;
left: -100vw;
width: 80vw;
height: 100vh;
background: #fff;
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transform: translateX(-100vw);
}
.sidebar.active {
transform: translateX(0);
}
.content {
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.content.shifted {
transform: translateX(80vw);
}- 不要用
translate3d(0, 0, 0)强制硬件加速——现代浏览器已自动优化，反而增加内存占用 -
cubic-bezier(0.25, 0.46, 0.45, 0.94)比默认ease更顺滑，尤其适合抽屉式交互 - 菜单宽度用
vw而非px，避免横屏时错位；但上限建议设max-width: 300px防止平板过宽
手势监听必须用 touchstart/touchmove 而非 click
纯 CSS toggle（如 checkbox + label）无法响应手指拖拽，用户会觉得“不够跟手”。真实左滑体验依赖原生触摸事件，否则只能点按开关，失去“滑”的直觉。
核心逻辑是记录起始 X 坐标，实时计算位移，再映射到 transform：
let startX = 0;
let isDragging = false;
<p>sidebar.addEventListener('touchstart', e => {
startX = e.touches[0].clientX;
isDragging = true;
});</p><p>document.addEventListener('touchmove', e => {
if (!isDragging) return;
const currentX = e.touches[0].clientX;
const diff = currentX - startX;
if (diff > 0 && diff < 300) { // 限制最大滑动距离
sidebar.style.transform = <code>translateX(${diff}px)</code>;
content.style.transform = <code>translateX(${diff}px)</code>;
}
});</p><p>document.addEventListener('touchend', () => {
isDragging = false;
const finalX = parseFloat(sidebar.style.transform.match(/-?\d+/)[0]) || 0;
if (finalX > 100) {
sidebar.classList.add('active');
content.classList.add('shifted');
} else {
sidebar.style.transform = 'translateX(-100vw)';
content.style.transform = 'translateX(0)';
}
});- 必须在
touchmove中阻止默认行为（e.preventDefault()），否则会触发页面缩放或滚动 - 不要用
pointer事件——部分安卓机型兼容性差，touch仍是移动端最稳选择 - 松手后判断滑动距离决定是否“吸附打开”，阈值设 100px 比固定比例更符合手指操作直觉
Flex 布局只用于菜单内部子项对齐，不参与滑动控制
很多人误以为整个左滑效果靠 display: flex 实现，其实 Flex 只负责菜单内部结构——比如导航项垂直排列、图标文字居中、点击反馈对齐。它和滑动动画无关，强行用 justify-content 或 flex-direction 控制位移只会让逻辑混乱。
正确分工：
- 菜单容器（
.sidebar）：用position: fixed+transform控制显隐 - 菜单内容区（
.sidebar > ul）：用display: flex+flex-direction: column垂直堆叠导航项 - 单个菜单项（
.sidebar li）：用align-items: center和justify-content: center居中图标文字
若在菜单容器上写 display: flex，反而会干扰 transform 的渲染优先级，导致动画撕裂。
真正容易被忽略的是：滑动过程中，菜单内文字不能重绘（尤其是 iOS 上 WebKit 的字体渲染 bug），所以要给 .sidebar 加 -webkit-font-smoothing: subpixel-antialiased，否则快速滑动时文字会模糊一帧。
