1

ブラウザのスクロールバーを置き換えるためにスクロールバーを書いています。私はjQueryを使用するよりも、学習体験のために自分でそれを行うことを好みます。

このコードは機能しましたが、いくつか問題があります。

  1. 下にスクロールしますが、上にはスクロールしません。
  2. 長さ100ピクセル、幅10ピクセルのスクロールバー要素をクリックすると、マウスポインターがスクロールバー要素の上部にスナップしているように見え、スクロールバーとしては不自然に見えます。

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日：

Javscript：

    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.あなたの問題は、クリックの高さに合わせて余白を調整していることです。これにより、スクローラーの端がマウスの位置に設定されます。これにより、マウスアウト ハンドラーがすぐにトリガーされ、スクロール ハンドラーが削除されます。

次のように、コードにログを追加しました。

<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 の値を保存します。次に、マウスを上下に動かしながら、新しい clientY を最初の clientY と比較し、その差をスクローラーの margin-top に適用します。

いいね？

于 2013-01-26T00:48:16.343 に答える