如何实现HTML/CSS/JS中侧边导航栏的全垂直高度调整手柄？

一、明确现状：无原生CSS支持全垂直边缘的resize手柄 #

目前CSS的resize属性仅能在元素角落生成拖拽手柄，没有官方特性可以让手柄覆盖整个侧边。所以常规实现路径分为两种：优化原生resize体验，或通过JS自定义拖拽逻辑。

二、优化原生resize方案（低成本快速实现） #

虽然无法改变原生手柄的位置，但可以通过添加透明可点击区域，让用户感知上觉得整个侧边都能拖拽：

• 给侧边栏添加右侧伪元素/子元素，设置10-15px宽度（足够用户点击的范围）、100%高度，定位在侧边栏右侧。
• 该区域设置pointer-events: none，让点击穿透到下方的原生resize手柄；同时侧边栏保留resize: horizontal; overflow: auto;（注意resize需要overflow非visible才生效）。

示例代码：

.sidebar {
  width: 300px;
  height: 100vh;
  resize: horizontal;
  overflow: auto;
  position: relative;
  background: #f0f0f0;
}

.sidebar::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 15px;
  height: 100%;
  cursor: ew-resize;
  pointer-events: none; /* 允许点击穿透到原生resize手柄 */
}

三、自定义JS拖拽逻辑（灵活可控，体验最优） #

如果追求完美的全侧边拖拽体验，自定义JS是行业常规方案，核心逻辑并不复杂，只需监听三个鼠标事件：

1. mousedown：在拖拽区域记录初始鼠标位置和侧边栏宽度。
2. mousemove：在document层面计算鼠标移动距离，实时更新侧边栏宽度。
3. mouseup：移除事件监听，结束拖拽状态。

示例代码：

<div class="sidebar">
  <div class="drag-handle"></div>
  <!-- 侧边栏内容 -->
</div>

.sidebar {
  width: 300px;
  height: 100vh;
  position: relative;
  background: #f0f0f0;
}

.drag-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 100%;
  cursor: ew-resize;
  background: transparent; /* 透明但保留点击交互 */
}

const sidebar = document.querySelector('.sidebar');
const dragHandle = document.querySelector('.drag-handle');

let isDragging = false;
let startX;
let startWidth;

dragHandle.addEventListener('mousedown', (e) => {
  isDragging = true;
  startX = e.clientX;
  startWidth = parseInt(window.getComputedStyle(sidebar).width, 10);
  
  // 绑定document级事件，避免鼠标移出手柄后中断拖拽
  document.addEventListener('mousemove', handleDrag);
  document.addEventListener('mouseup', stopDrag);
  
  e.preventDefault(); // 防止拖拽时选中文本
});

function handleDrag(e) {
  if (!isDragging) return;
  const deltaX = e.clientX - startX;
  sidebar.style.width = `${startWidth + deltaX}px`;
}

function stopDrag() {
  isDragging = false;
  document.removeEventListener('mousemove', handleDrag);
  document.removeEventListener('mouseup', stopDrag);
}

此方案可自由控制拖拽触发区域、限制最小/最大宽度，还能轻松实现与其他元素的联动调整。

四、其他可选方案 #

• CSS变量联动：将侧边栏宽度存入CSS变量，方便页面其他元素同步响应宽度变化。
• 框架组件复用：如果使用React/Vue等框架，Ant Design的Layout、Element Plus的Container等组件库已封装好可拖拽侧边栏，直接复用即可。

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