javascript - slider 游标不停留在 slider 中

Question

我正在尝试创建自定义范围 slider 。我无法将 slidersCursor 保留在 slider 中。

相关代码如下:

var cursorPosition = 1 - clamp01((sliderDimention - (e.clientX - startPoint.left)) / sliderDimention);
sliderCursor.style.transform = 'translateX(' + (cursorPosition * sliderDimention - cursorRadius) + 'px)';

使用上面的代码，当您将 slider 拖动到最右侧或最左侧时，光标会从两侧的 slider 中途出来。

当我删除 - cursorRadius 时，它向右侧移动过多。当您向左拖动时，它留在 slider 中，但当您向右拖动时，它会离开 slider 。

当 cursorRadius 等于 cursor.offsetWidth 时，它向左侧移动过多。

当你拖到最远的一边时，如何让 sliderCursor 停留在 slider 内？

(请不要发布任何 JQuery 或其他“你可以使用‘这个’插件”的答案。我这样做是为了学习目的，我想创建我自己的。谢谢!)

JSFiddle

function RangeSlider( /** DOM Elem */ parentElem) {
  var wrapperElem = document.getElementsByClassName('wrapperElem')[0],
    slider = document.getElementsByClassName('slider')[0],
    sliderCursor = document.getElementsByClassName('sliderCursor')[0];

  var sliderDimention = slider.offsetWidth,
    cursorRadius = sliderCursor.offsetHeight / 2,
    startPoint,
    currentTarget;


  function sliderDown(e) {
    e.preventDefault();

    currentTarget = null;
    var sliderWithDescendents = wrapperElem.querySelectorAll('*');
    for (var i = 0; i < sliderWithDescendents.length; i++) {
      sliderWithDescendents[i]
      if (sliderWithDescendents[i] === e.target || wrapperElem === e.target) {
        currentTarget = wrapperElem.children[0];
        break;
      }
    }
    if (currentTarget === null) return;

    startPoint = getOrigin(currentTarget);
    sliderDimention = slider.offsetWidth;

    window.addEventListener('mousemove', sliderMove);
    sliderMove(e);
  }

  function sliderMove(e) {
    var cursorPosition = 1 - clamp01((sliderDimention - (e.clientX - startPoint.left)) / sliderDimention);
    sliderCursor.style.transform = 'translateX(' + (cursorPosition * sliderDimention - cursorRadius) + 'px)';
  }

  function mouseUpEvents() {
    window.removeEventListener('mousemove', sliderMove);
  }
  wrapperElem.addEventListener('mousedown', sliderDown);
  window.addEventListener('mouseup', mouseUpEvents);
}

var sliderTest = document.getElementById('sliderTest');
var test = new RangeSlider(sliderTest);






function clamp01(val) {
  return Math.min(1, Math.max(0, val));
}

function getOrigin(elm) {
  var box = (elm.getBoundingClientRect) ? elm.getBoundingClientRect() : {
      top: 0,
      left: 0
    },
    doc = elm && elm.ownerDocument,
    body = doc.body,
    win = doc.defaultView || doc.parentWindow || window,
    docElem = doc.documentElement || body.parentNode,
    clientTop = docElem.clientTop || body.clientTop || 0, // border on html or body or both
    clientLeft = docElem.clientLeft || body.clientLeft || 0;

  return {
    left: box.left + (win.pageXOffset || docElem.scrollLeft) - clientLeft,
    top: box.top + (win.pageYOffset || docElem.scrollTop) - clientTop
  };
}

.wrapperElem {
  height: 18px;
  width: 100%;
  cursor: pointer;
  display: flex;
}
.slider {
  height: 100%;
  width: calc(100% - 62px);
  border: 1px solid black;
}
.sliderCursor {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid black;
}

<div class="wrapperElem">
  <div class="slider">
    <div class="sliderCursor"></div>
  </div>
</div>

Answer 1

它应该是 sliderCursor.style.transform = 'translateX(' + (cursorPosition * (sliderDimention - cursorRadius*2)) + 'px)';

你需要半径乘以x2然后括号先执行操作然后乘以cursorPostions(从0到1);

虽然它有效，但我会尝试限制最终值(从 [0 + 半径] 到 [维度 - 半径])。这样你就不会在鼠标位于 scroll_cursor 的左侧或右侧时出现这种奇怪的拖动。您希望鼠标始终位于它的中心。

如果你是为了学习，剖析rangeslider.js ？它的编码非常好。

function RangeSlider( /** DOM Elem */ parentElem) {
  var wrapperElem = document.getElementsByClassName('wrapperElem')[0],
    slider = document.getElementsByClassName('slider')[0],
    sliderCursor = document.getElementsByClassName('sliderCursor')[0];

  var sliderDimention = slider.offsetWidth,
    cursorRadius = sliderCursor.offsetHeight / 2,
    startPoint,
    currentTarget;


  function sliderDown(e) {
    e.preventDefault();

    currentTarget = null;
    var sliderWithDescendents = wrapperElem.querySelectorAll('*');
    for (var i = 0; i < sliderWithDescendents.length; i++) {
      sliderWithDescendents[i]
      if (sliderWithDescendents[i] === e.target || wrapperElem === e.target) {
        currentTarget = wrapperElem.children[0];
        break;
      }
    }
    if (currentTarget === null) return;

    startPoint = getOrigin(currentTarget);
    sliderDimention = slider.offsetWidth;

    window.addEventListener('mousemove', sliderMove);
    sliderMove(e);
  }

  function sliderMove(e) {
    var cursorPosition = 1 - clamp01((sliderDimention - (e.clientX - startPoint.left)) / sliderDimention);
        sliderCursor.style.transform = 'translateX(' + (cursorPosition * (sliderDimention - cursorRadius*2)) + 'px)';;
  }

  function mouseUpEvents() {
    window.removeEventListener('mousemove', sliderMove);
  }
  wrapperElem.addEventListener('mousedown', sliderDown);
  window.addEventListener('mouseup', mouseUpEvents);
}

var sliderTest = document.getElementById('sliderTest');
var test = new RangeSlider(sliderTest);






function clamp01(val) {
  return Math.min(1, Math.max(0, val));
}

function getOrigin(elm) {
  var box = (elm.getBoundingClientRect) ? elm.getBoundingClientRect() : {
      top: 0,
      left: 0
    },
    doc = elm && elm.ownerDocument,
    body = doc.body,
    win = doc.defaultView || doc.parentWindow || window,
    docElem = doc.documentElement || body.parentNode,
    clientTop = docElem.clientTop || body.clientTop || 0, // border on html or body or both
    clientLeft = docElem.clientLeft || body.clientLeft || 0;

  return {
    left: box.left + (win.pageXOffset || docElem.scrollLeft) - clientLeft,
    top: box.top + (win.pageYOffset || docElem.scrollTop) - clientTop
  };
}

.wrapperElem {
  height: 18px;
  width: 100%;
  cursor: pointer;
  display: flex;
}
.slider {
  height: 100%;
  width: calc(100% - 62px);
  border: 1px solid black;
}
.sliderCursor {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid black;
}

<div class="wrapperElem">
  <div class="slider">
    <div class="sliderCursor"></div>
  </div>
</div>