如何不设置start为50即可让noUiSlider滑块默认位于中间

问题原因 #

当前代码中滑块值和滚动区域百分比直接绑定，滑块初始化设置start:50时会自动触发一次update事件，导致滚动位置被同步到50%高度，和预期效果不符。

解决方案 #

方案1（推荐）：增加初始化标记，跳过初始滚动同步

仅初始化阶段不执行滑块到滚动的同步逻辑，后续滑块交互的同步逻辑完全保留，符合大多数交互场景：

let verticalBaseSlider = document.getElementById("baseControler");
if (verticalBaseSlider) {
  // 新增初始化状态标记
  let isSliderInit = true;
  noUiSlider.create(verticalBaseSlider, {
    start: 50,
    direction: "ltr",
    orientation: "vertical",
    connect: 'lower',
    animate: false,
    range: {
      min: 0,
      max: 100,
    },
  });

  verticalBaseSlider.noUiSlider.on("update", function (values, handle) {
    // 初始化阶段跳过滚动位置同步
    if (isSliderInit) {
      isSliderInit = false;
      return;
    }
    let panel = document.getElementById("four");
    let total = panel.scrollHeight - panel.offsetHeight;
    // 兼容内容不足无法滚动的边界情况
    if (total <= 0) return;
    let percentage = total * (values[handle] / 100);
    panel.scrollTop = percentage;
  });
  // 强制初始化滚动位置为0
  document.getElementById("four").scrollTop = 0;
}

方案2：修改映射逻辑，滑块中间位置固定对应滚动顶部

如果需要滑块在0-50区间时滚动都保持在顶部，仅滑块从中间向下拖动时才触发滚动，可以调整数值映射规则：

let verticalBaseSlider = document.getElementById("baseControler");
if (verticalBaseSlider) {
  noUiSlider.create(verticalBaseSlider, {
    start: 50,
    direction: "ltr",
    orientation: "vertical",
    connect: 'lower',
    animate: false,
    range: {
      min: 0,
      max: 100,
    },
  });

  verticalBaseSlider.noUiSlider.on("update", function (values, handle) {
    let panel = document.getElementById("four");
    let total = panel.scrollHeight - panel.offsetHeight;
    if (total <= 0) return;
    // 滑块50对应滚动0，滑块100对应滚动100%，滑块<50时滚动保持0
    let sliderVal = Number(values[handle]);
    let percentage = sliderVal >= 50 ? total * ((sliderVal - 50) / 50) : 0;
    panel.scrollTop = percentage;
  });
}

效果参考 #

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