js實作輸入范圍滑動，滑鼠快速滑動時會有卡頓-有解無憂

我正在制作自定義滑塊并且遇到以下問題，當我的滑鼠快速水平移動到滑塊的范圍之外，超出滑塊的寬度時，滑塊的值不會理想地轉到最小值或最大值，而是有一個暫停，有什么辦法可以讓它滑動順暢嗎？

卡頓效應 js實作輸入范圍滑動，滑鼠快速滑動時會有卡頓

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

  function onMouseMove(event) {
    const {clientX} = event
    const {left, right} = elWrap.getBoundingClientRect()

    // is the mouse inside the wrap?
    if (clientX < left || clientX > right) return

    // set progress width
    elProgress.style.width = `${(clientX - left) / elWrap.offsetWidth * 100}%`
  }

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

.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>

uj5u.com熱心網友回復：

問題

您正在將滑鼠移出 mousemove 事件在范圍之外注冊的范圍，但是您有這一行忽略了此類事件：

if (clientX < left || clientX > right) return

解決方案

處理超出范圍的事件

if (clientX < left) {
  elProgress.style.width = `${0}%`;
} else if (clientX > right) {
  elProgress.style.width = `${100}%`;
} else {
  elProgress.style.width = `${((clientX - left) / elWrap.offsetWidth) * 100}%`;
}

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

function onMouseMove(event) {
  const {
    clientX
  } = event
  const {
    left,
    right
  } = elWrap.getBoundingClientRect()

  if (clientX < left) {
    elProgress.style.width = `${0}%`
  } else if (clientX > right) {
    elProgress.style.width = `${100}%`
  } else {
    elProgress.style.width = `${(clientX - left) / elWrap.offsetWidth * 100}%`
  }
}

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

.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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/537407.html

標籤：javascript网页格式CSS

上一篇：如何使按鈕粘在div的底部？[復制]

下一篇：遍歷整個表格會導致向單個元素顯示多個值時出現問題