Question

我有一个垂直范围滑块，我使用transform translateY来调整光标的位置，而不是top。只有一件轻微的事情不能按我的意愿运作。

当您将光标一直向上移动时，它不会越过滑块边框;但是当光标向下移动时，光标高度超过滑块边界的一半。

如何使光标移动到光标高度的一半通过顶部滑块边框，就像它在底部一样？

以下是第43行的相关代码。

hsv_barcursor.style.transform = 'translateY(' + (100 - color.RND.hsv.v) / 100 * (hsv_barHeight - cursorRadius) + 'px)';

我不是在寻找JQuery的答案，也不是在寻找html's输入范围。

JSFiddle

var luminenceBarWrapper = document.getElementById('luminenceBarWrapper'),
  hsv_barBGLayer = document.getElementById('bar-bg'),
  hsv_barcursor = document.getElementById('hsv-barcursor'),
  hsv_barCursors = document.getElementById('hsv-barcursors'),

  hsv_barHeight = hsv_barCursors.offsetHeight,
  cursorRadius = hsv_barcursor.offsetHeight / 2,
  startPoint,
  currentTarget,
  myColor = new Colors();

// Create Event Functions
var hsvDown = function(e) { // mouseDown callback
    e.preventDefault();

    if (e.target === hsv_barcursor) currentTarget = e.target.parentNode;
    else if (e.target === hsv_barCursors) currentTarget = e.target;
    else return;

    startPoint = getOrigin(currentTarget);

    window.addEventListener('mousemove', hsvMove);
    hsvMove(e);
    startRender();
  },
  hsvMove = function(e) { // mouseMove callback
    myColor.setColor({
      v: (hsv_barHeight - (e.clientY - startPoint.top)) / hsv_barHeight * 100
    }, 'hsv');
  };

// Initial Rendering
doRender(myColor.colors);

// Adde Events To Objects
luminenceBarWrapper.addEventListener('mousedown', hsvDown);
window.addEventListener('mouseup', function() {
  window.removeEventListener('mousemove', hsvMove);
  stopRender();
});

function doRender(color) {
  hsv_barcursor.style.transform = 'translateY(' + (100 - color.RND.hsv.v) / 100 * (hsv_barHeight - cursorRadius) + 'px)';
}

var renderTimer,
  startRender = function(oneTime) {
    renderTimer = window.setInterval(function() {
      doRender(myColor.colors);
    }, 13); // 1000 / 60); // ~16.666 -> 60Hz or 60fps
  },
  stopRender = function() {
    window.clearInterval(renderTimer);
  };

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
  };
}

body {
  position: absolute;
}
#bar-bg {
  width: 15px;
  height: 500px;
  background-color: greenyellow;
}
#hsv-barcursors {
  position: absolute;
  right: -7.5px;
  width: 30px;
  top: 0;
  height: 500px;
  overflow: hidden;
  cursor: pointer;
}
#hsv-barcursor {
  position: absolute;
  right: 7.5px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid black;
  margin-bottom: 5px;
}

<script src="https://rawgit.com/PitPik/colorPicker/master/colors.js"></script>

<div id="luminenceBarWrapper">
  <div id="bar-bg"></div>
  <div id="hsv-barcursors" id="hsv_cursors">
    <div id="hsv-barcursor"></div>
  </div>
</div>

Answer 1

您需要考虑额外的半径 -

function doRender(color) {
    hsv_barcursor.style.transform = 'translateY(' + (100 - color.RND.hsv.v) / 100 * (hsv_barHeight - (cursorRadius * 2)) + 'px)';
}

Answer 2

在<{1}}函数中其他计算后，您需要删除圆的半径。

这是因为当doRender()的值为零时，分子变为零，Y的整个值被限制为零（即不能转为负Y值）

参见示例代码：

color.RND.hsv.v

<强> Updated fiddle

使div超过父边界

JSFiddle

2 个答案: