Div 转到错误的位置

我正在编辑我从这个颜色选择器中使用的垂直滑块。它使用top来调整光标位置。我想改用transform translateY。当我这样做时，我显然必须以不同的方式计算它。

原始计算为：(行：#286(

hsv_barcursor.style.top = ((1 - color.hsv.v) * hsv_barHeight) + 'px';

我的更新版本是：(下面的JSFiddle的第43行(

hsv_barcursor.style.transform = 'translateY(calc(' + (color.RND.hsv.v * 10) + '% - ' + cursorRadius + 'px))';

我的版本的位置是错误的。

1. 为什么top的数学对tranlateY不起作用？
用于
2. translateY的正确数学是什么？

我不是在寻找 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(calc(' + (color.RND.hsv.v * 10) + '% - ' + cursorRadius + 'px))';
  //hsv_barcursor.style.top = ((1 - color.hsv.v) * hsv_barHeight) + '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>