自定义内容滚动框的滚动条会在拖动时跳转

Question

我使用HTML，CSS和JavaScript创建了一个自定义内容滚动框。当您尝试拖动滚动条时，它会跳转到滚动条的左边缘。知道为什么我错过了什么吗？

var scrollbar = document.getElementById("scrollbar");
var barWidth = 300;
var scrollbarWidth = 40;

scrollbar.addEventListener("mousedown", function(e) {
    window.addEventListener("mousemove", hScroll, null);
}, null)

window.addEventListener("mouseup", function(e) {
    window.removeEventListener("mousemove", hScroll, null);
}, null);

function hScroll(e) {
    var scroller_pos = e.clientX - offset;
    if (scroller_pos <= 0) scroller_pos = 0;
    else if (scroller_pos >= barWidth-scrollbarWidth) scroller_pos = barWidth-scrollbarWidth;
    scrollbar.style.marginLeft = scroller_pos + "px";
}

Answer 1

在mousedown上，您应该计算距bar左边缘的正方形距离与鼠标x位置距同一边缘的距离之间的偏差。然后在移动时你应该将它添加到广场的新位置。

 _____
|     |
|   .<+--click
|___|_|
|<->|
  |
offset