Javascript 事件对象 ClientY 错误地为 0

Question

I wrote a scollbar that works pretty good so far.

This is the order in which it works:

1. when I click on the gripper/scrollbar element foo.addEventListener( "mousedown", scrollObject.sbar1, false); is triggered and sbar1() correctly has the event.clientY coordinates of the gripper/scrollbar element.

2. I use foo.addEventListener( "mousemove", sbar2, false); in sbar1(event) to get the gripper coordinates real time while it slides.

However, the issue is when sbar2(event) is called the event.clientY coordinates always start at 0. In my logic, the event.clientY coordinates should be the same as sbar1's event object coordinates since it is the same element that the mousedown event listener.

Why is the sbar2() mousedown event object ( event.clientY ) coordinates 0? How can I make the event target object be correct as sbar1() event.clientY is so it can start from there as it takes coordinates real time?

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,
    }
}();

For my own learning purposes, I prefer to use Javascript without jQuery.

Answer 1

Figured it out....it was the correct coordinates and not zero. The difference from current was causing it to be 0...not sure how or why.