jQuery Resizable左右面板分割器含垂直滚动条时失效问题求助

问题描述 #

使用jQuery Resizable实现左右横向面板（left_pane和right_pane），中间带拖拽条，为方便定位给left_pane添加右侧黑色边框。内容较少时功能正常，但点击【添加内容】按钮后出现两个问题：

• 分割拖拽功能失效（推测因垂直滚动条导致）
• 拖拽条位置在滚动条左侧，而非预期的黑色边框位置

解决方案 #

问题根源在于jQuery UI Resizable的拖拽手柄默认附加在目标元素内部，当left_pane出现垂直滚动条时，手柄会被滚动条挤压偏移，同时滚动条改变了元素的交互区域导致拖拽失效。通过以下修改解决：

1. 调整Resizable配置 #

修改JS中resizable的初始化配置，添加拖拽范围限制并将手柄移到容器层级：

$("#left_pane").resizable({
  handles: 'e',
  containment: "#container", // 限制拖拽范围在容器内，避免面板溢出
  appendTo: "#container",    // 将拖拽手柄放到容器中，脱离left_pane的滚动影响
  resize: function() {
    $("#right_pane").outerWidth($("#container").innerWidth() - $("#left_pane").outerWidth());
  }
});

2. 调整拖拽手柄样式 #

添加CSS样式，让手柄定位到left_pane的右侧边框位置，保证拖拽区域的可点击性：

/* 重置jQuery UI拖拽手柄的默认样式 */
#left_pane .ui-resizable-e {
  width: 10px;
  right: -5px; /* 让手柄覆盖到left_pane的右侧边框位置 */
  top: 0;
  height: 100%;
  background: transparent; /* 透明背景，不遮挡原有黑色边框 */
}

3. 保留原有面板样式 #

原CSS中的left_pane右侧边框可以保留，确保视觉定位的直观性：

#left_pane {
  width: 25%;
  left: 0;
  background: lightgrey;
  border-right: 2px solid black; /* 保留边框用于定位 */
}

效果验证 #

修改后，添加内容出现垂直滚动条时：

• 拖拽条会固定在left_pane的右侧黑色边框位置，不再被滚动条挤压
• 拖拽功能正常，可调整左右面板宽度且不会超出容器范围

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