1

我正在编写一个滚动条来替换浏览器上的滚动条。为了学习经验，我更喜欢自己做，而不是使用 jQuery。

我得到了这段代码，但我有几个问题：

  1. 它会向下滚动，但不会向上滚动。
  2. 当我点击 100px 长和 10px 宽的滚动条元素时，鼠标指针似乎捕捉到滚动条元素的顶部，这对于滚动条来说看起来不自然。

html:

<div id="portfolioScrollbar">
        <div id="scrollbarTrack"><a id="scrolla" href="#scrollbar"></a></div>
    <div id="pbody">
                      ...all the text stuff...
             </div>
     </div>

编辑-新代码 2013 年 1 月 27 日：

Javascript：

    function CloseContact() {
        setTimeout (addClose, 2200 );
        setTimeout (addContact, 2400 );
        var foo = document.getElementById("scrolla");
        foo.addEventListener( "mousedown", scrollObject.sbar1, false);
        foo.addEventListener( "mouseup", removeAll, false);
        foo.addEventListener( "mouseout", removeAll, false);
    }

    function removeAll(event) {
        console.log("REMOVEaLL");
        var foo = document.getElementById("scrolla");
        foo.removeEventListener("mouseup", scrollObject.sbar2, false); 
        foo.removeEventListener("mouseout", scrollObject.sbar2, false); 
        foo.removeEventListener("mousemove", scrollObject.sbar2, false); 
    }



var scrollObject = function (event) {

    var current = 0;
    var move = null;

    function sbar1(event) {
        console.log("mousedown");
        event.preventDefault();
        var foo = document.getElementById("scrolla");
        current = event.clientY;
        foo.addEventListener( "mousemove", sbar2, false);
    }

    function sbar2(event) {
//      console.log(event.clientY);
        event.preventDefault();
        var pbody = document.getElementById("pbody");
        var scroll = document.getElementById("scrolla");
        move = event.clientY - current;

        if (move != 78644 ) {
            console.log(move);
        scroll.style.marginTop =  move + "px";
        //current = move;
        }
    }

    return {
        sbar1: sbar1,
            sbar2: sbar2,
    }
}();
4

1 回答 1

1

K. 所以您的问题是，您正在调整边距以匹配点击的高度，这会将滚动条的边缘设置为鼠标的位置。这会立即触发 mouseout 处理程序，该处理程序会删除滚动处理程序。

我在您的代码中添加了一些日志记录，如下所示：

<script type="text/javascript">
var foo = document.getElementById("scrolla");
    var pbody = document.getElementById("pbody");
    var scroll = document.getElementById("scrolla");


function contact() {    
    foo.addEventListener( "mousedown", sbar1, false);
    foo.addEventListener( "mouseup", function() { console.log("### removing mousemove"); foo.removeEventListener("mousemove", sbar2, false) }, false);
    foo.addEventListener( "mouseout", function() { console.log("### removing mouseout"); foo.removeEventListener("mousemove", sbar2, false) }, false);
}

function sbar1() {
console.log("@@@ adding listener");
    foo.addEventListener( "mousemove", sbar2, false);
}


function sbar2(event) {
console.log("moving");
    var h = event.clientY;
console.log(h);
    scroll.style.marginTop = h + "px";
}


scroll.addEventListener('click', contact, false);

contact();
</script>

并在点击时得到以下输出：

@@@ adding listener 
moving 
67 
### removing mouseout 
### removing mousemove

我将让您探索您当前的方法，但您可能想要计算鼠标位置在拖动时的差异，而不是直接将滚动条移动到鼠标位置。

例如，当他们最初单击时，您存储 clientY 的值。然后当他们向上或向下移动鼠标时，您将新的客户端 Y 与初始客户端 Y 进行比较，并将差异应用于滚动条的边距顶部。

听起来不错？

于 2013-01-26T00:48:16.343 回答