自定义JS滑块快速滑出范围时卡顿，如何实现平滑滑动？

你制作的自定义Slider存在以下问题：当鼠标快速横向移动到Slider范围外时，进度条无法理想地切换到最小或最大值，反而出现卡顿（表现为进度条停留在中途位置，无法平滑滑到极值）。

问题根源在于原代码中鼠标移出范围时直接终止了进度计算，导致进度条没有机会更新到极值。只需要修改onMouseMove函数，对鼠标位置做边界限制，就能解决这个问题：

const elWrap = document.getElementById('wrap');
const elProgress = document.getElementById('progress');

function onMouseMove(event) {
  const { clientX } = event;
  const { left, right } = elWrap.getBoundingClientRect();
  // 将鼠标位置限制在Slider的左右边界内
  const clampedX = Math.max(left, Math.min(clientX, right));
  // 基于限制后的位置计算进度
  elProgress.style.width = `${((clampedX - left) / elWrap.offsetWidth) * 100}%`;
}

// slider mousedown events
elWrap.addEventListener('mousedown', function () {
  window.addEventListener('mousemove', onMouseMove);
  window.addEventListener('mouseup', function () {
    window.removeEventListener('mousemove', onMouseMove);
  }, { once: true });
});

对应的CSS和HTML可保持不变：

.x {
    padding: 128px;
}

#wrap {
    border-radius: 999px;
    width: 320px;
    height: 12px;
    background-color: #ccc;
    cursor: pointer;
}

#progress {
    height: 12px;
    width: 50%;
    border-radius: 999px;
    background-color: blue;
}

<div class="x">
  <div id="wrap">
    <div id="progress"></div>
  </div>
</div>

修改说明 #

• 移除原代码中if (clientX < left || clientX > right) return的终止逻辑，确保进度计算始终执行
• 使用Math.max和Math.min将鼠标X坐标钳位在Slider的左右边界之间，保证计算出的进度始终在0%-100%范围内
• 基于钳位后的坐标计算进度条宽度，这样快速移到外部时，进度条会自动滑到最左或最右，实现平滑滑动

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