如何解决两侧边抽屉重叠问题？实现抽屉联动左滑效果

核心逻辑 #

触发第二个抽屉打开动作时，给第一个抽屉添加向左偏移的样式类；关闭第二个抽屉时移除该类，配合过渡动画实现平滑滑动，同时通过层级控制确保第二个抽屉在上方显示。

原生HTML/CSS/JS实现示例 #

HTML结构

<!-- 第一个侧边抽屉 -->
<div class="drawer drawer-primary">抽屉1内容区域</div>
<!-- 第二个侧边抽屉 -->
<div class="drawer drawer-secondary">抽屉2内容区域</div>
<!-- 控制按钮 -->
<button id="open-second-drawer">打开抽屉2</button>
<button id="close-second-drawer">关闭抽屉2</button>

CSS样式

/* 通用抽屉样式 */
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  height: 100vh;
  background-color: #ffffff;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.12);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 第一个抽屉层级低于第二个 */
.drawer-primary {
  z-index: 99;
}

/* 第二个抽屉层级更高 */
.drawer-secondary {
  z-index: 100;
  /* 默认隐藏 */
  transform: translateX(100%);
}

/* 第一个抽屉左移的样式类 */
.drawer-primary.shift-left {
  transform: translateX(-300px); /* 偏移量等于抽屉宽度 */
}

/* 第二个抽屉打开的样式 */
.drawer-secondary.open {
  transform: translateX(0);
}

JavaScript控制逻辑

const drawerPrimary = document.querySelector('.drawer-primary');
const drawerSecondary = document.querySelector('.drawer-secondary');
const openBtn = document.getElementById('open-second-drawer');
const closeBtn = document.getElementById('close-second-drawer');

// 打开第二个抽屉时，让第一个抽屉左移
openBtn.addEventListener('click', () => {
  drawerPrimary.classList.add('shift-left');
  drawerSecondary.classList.add('open');
});

// 关闭第二个抽屉时，恢复第一个抽屉位置
closeBtn.addEventListener('click', () => {
  drawerPrimary.classList.remove('shift-left');
  drawerSecondary.classList.remove('open');
});

框架适配（以React为例） #

通过状态管理控制样式类切换，逻辑更简洁：

import { useState } from 'react';

const MultiDrawer = () => {
  const [isSecondDrawerOpen, setIsSecondDrawerOpen] = useState(false);

  return (
    <div style={{ position: 'relative', minHeight: '100vh' }}>
      <div 
        className={`drawer drawer-primary ${isSecondDrawerOpen ? 'shift-left' : ''}`}
      >
        抽屉1内容
      </div>
      <div 
        className={`drawer drawer-secondary ${isSecondDrawerOpen ? 'open' : ''}`}
      >
        抽屉2内容
        <button onClick={() => setIsSecondDrawerOpen(false)}>关闭抽屉</button>
      </div>
      <button onClick={() => setIsSecondDrawerOpen(true)}>打开抽屉2</button>
    </div>
  );
};

export default MultiDrawer;

注意事项 #

• 偏移量需与抽屉宽度一致，避免出现显示残留
• 调整transition的缓动函数可以优化滑动手感
• 多层抽屉场景下，可通过动态计算偏移量（如抽屉宽度 × 已打开抽屉数量）实现批量偏移

内容的提问来源于stack exchange，提问作者Nikita Shah