0

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";
}
4

1 に答える 1

1

barマウスダウンでは、の左端からの正方形の距離と、同じ端からのマウスの x 位置の距離の間のオフセットを計算する必要があります。次に、移動時に、これを正方形の新しい位置に追加する必要があります。

 _____
|     |
|   .<+--click
|___|_|
|<->|
  |
offset
于 2012-08-20T14:47:33.893 に答える