1

我写了一个 scollbar，到目前为止效果很好。

这是它的工作顺序：

  1. 当我单击抓手/滚动条元素时foo.addEventListener( "mousedown", scrollObject.sbar1, false);，将触发并sbar1() 正确获得event.clientY抓手/滚动条元素的坐标。

  2. 我用foo.addEventListener( "mousemove", sbar2, false);in sbar1(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。

4

1 回答 1

0

想通了....这是正确的坐标，而不是零。与当前的差异导致它为 0 ......不知道如何或为什么。

于 2013-01-28T02:50:18.193 回答