如何基于Position而非Width实现拖拽栏，使左侧图片仅位移不缩放？

核心思路是把左侧容器从宽度自适应改成固定宽度+绝对定位，拖拽时只调整它的位置而非宽度，彻底避免图片被挤压。

1. 调整左侧容器的CSS #

找到原代码中.left的样式，替换为以下代码（记得给父容器加position: relative;，否则绝对定位会相对于整个页面）：

.left {
  position: absolute;
  top: 0;
  left: 0;
  width: 500px; /* 设置为你需要的固定宽度，建议和图片原始宽度一致 */
  height: 100%;
  overflow: hidden; /* 超出容器的部分自动隐藏，模拟移出屏幕效果 */
}

2. 修改拖拽事件的核心逻辑 #

把原代码中修改宽度的语句：

left.style.width = (e.pageX - bar.offsetWidth / 2) + 'px';

替换为以下代码（用transform: translateX控制位置，性能更优）：

// 计算偏移量：让拖拽栏始终对齐左侧容器的中间位置
const offset = e.pageX - left.offsetWidth / 2;
// 限制拖拽范围，避免容器完全移出屏幕（可根据需求调整上下限）
const clampedOffset = Math.max(-left.offsetWidth, Math.min(0, offset));
// 应用平移效果
left.style.transform = `translateX(${clampedOffset}px)`;

如果不习惯用transform，也可以直接修改left属性：

const leftPos = e.pageX - left.offsetWidth / 2;
const clampedPos = Math.max(-left.offsetWidth, Math.min(0, leftPos));
left.style.left = `${clampedPos}px`;

3. 适配右侧容器布局 #

给右侧容器（.right）添加边距，避免被左侧容器遮挡：

.right {
  margin-left: 50px; /* 设为拖拽栏的宽度，或根据你的布局调整 */
  height: 100%;
  overflow: auto;
}

效果说明 #

• 左侧容器固定宽度后，图片会保持原始尺寸，不会被挤压变形。
• 拖拽时左侧容器整体平移，图片会逐渐移出视野，和原效果视觉一致但逻辑更合理。
• 代码中的clampedOffset是可选的，用于限制拖拽范围，防止容器完全消失或过度偏移，可根据需求删除或调整数值。

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