我写了一个 scollbar,到目前为止效果很好。
这是它的工作顺序:
当我单击抓手/滚动条元素时
foo.addEventListener( "mousedown", scrollObject.sbar1, false);
,将触发并sbar1()
正确获得event.clientY
抓手/滚动条元素的坐标。我用
foo.addEventListener( "mousemove", sbar2, false);
insbar1(event)
在它滑动时实时获取抓手坐标。
但是,问题是当sbar2(event)
被调用时,event.clientY
坐标总是从 0 开始。在我的逻辑中,event.clientY
坐标应该与 sbar1 的事件对象坐标相同,因为它与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。