これまでのところ、かなりうまく機能するスコルバーを書きました。
これが機能する順序は次のとおりです。
グリッパー/スクロールバー要素をクリックすると、
foo.addEventListener( "mousedown", scrollObject.sbar1, false);
トリガーされ、グリッパー/スクロールバー要素の座標がsbar1()
正しく表示されます。event.clientY
スライド中にグリッパー座標をリアルタイムで取得するために使用
foo.addEventListener( "mousemove", sbar2, false);
し ます。sbar1(event)
ただし、問題は、座標が常に 0 から始まるときsbar2(event)
に呼び出されることです。私のロジックでは、イベント リスナーと同じ要素であるため、座標は sbar1 のイベント オブジェクトの座標と同じである必要があります。event.clientY
event.clientY
mousedown
sbar2()
mousedown
イベント オブジェクト ( event.clientY
) の座標が 0なのはなぜですか? sbar1()
event.clientY
座標がリアルタイムでかかるので、そこから開始できるように、イベント ターゲット オブジェクトをそのまま正しくするにはどうすればよいですか?
HTML:
<div id="portfolioScrollbar">
<div id="scrollbarTrack"><a id="scrolla" href="#scrollbar"></a></div>
<div id="pbody">
...all the text stuff...
</div>
</div>
Javascript:
function start() {
var foo = document.getElementById("scrolla");
foo.addEventListener( "mousedown", scrollObject.sbar1, false);
foo.addEventListener( "mouseup", removeAll, false);
foo.addEventListener( "mouseout", removeAll, false);
}
var scrollObject = function (event) {
var current = null;
var move = null;
var scroll = document.getElementById("scrolla"); // THIS IS THE GRIPPER/SLIDER ELEMENT
function sbar1(event) {
console.log("mousedown");
event.preventDefault();
current = event.clientY;
console.log(current);
console.log("seperate");
foo.addEventListener( "mousemove", sbar2, false);
}
function sbar2(event) {
// console.log(event.clientY);
event.preventDefault();
move = event.clientY - current;
move = Math.abs(move);
console.log(move);
scroll.style.top = move + "px";
}
return {
sbar1: sbar1,
sbar2: sbar2,
}
}();
私自身の学習目的では、jQuery を使用せずに Javascript を使用することを好みます。