-1

スクロールにプラグインを使用したくありません。代わりに、独自のスクロールバーを作成しました（起動時に完成していません）。Chromeでは多少問題なく動作しますが、Firefoxでは動作しません。スクロールが「固まる」こともあります。誰でも助けてもらえますか - 私のやり方が正しいかどうかを示しますか? または、マウス イベントを使用する領域にさらに集中する必要がありますか?

ここに私のjsFiddleがあります:

jsfiddle リンクはこちら

私のコードまで：

$(document).ready(function(){

    var element = $('#draw'),
        draggerLeftPos = 0,
        draggerWidth = element.width(),
        totalDist = draggerLeftPos + draggerWidth,
        gear = 0,down = 0,startPoint = 0,moveLeft=0,balance=0;

    var move = (function(){

       element.bind('mousedown mousemove mouseup mouseleave',function(event){

         if(event.type == "mousedown"){
             down = 1;
             startPoint = event.pageX;
         }

         if(down && event.type =="mousemove"){
             moveLeft = event.pageX;
             process();
         }

         if(down && (event.type =="mouseup" || event.type == "mouseleave")){
             down = 0;
             draggerLeftPos = element.position().left;
             console.log("draggerLeftPos",draggerLeftPos)
         }

       })

      var process = function(){
         element.css({left:(moveLeft-startPoint)+draggerLeftPos})
         console.log((moveLeft-startPoint)+draggerLeftPos,element.css('left'));
      }

    })();
})

前もって感謝します。

4

1 に答える 1

1

mousemove イベントを要素自体にバインドしているため、要素の境界内でのみトリガーされます。

あなたの場合、要素を div (スクロールバー) でラップし、その上で mousemove をトリガーすることをお勧めします。

var scrollbar = $('#your_scrollbar'); // your wrapper scrollbar
var down = false;

element.bind('mousedown', function(e) {
  down = true;
  startPoint = e.pageX;
});

element.bind('mouseup', function(e) {
  down || (draggerLeftPos = element.position().left);
  down = false;
});

scrollbar.bind('mousemove', function(e) {
  if (down) {
    moveLeft = event.pageX;
    process();
  }
});

//... and so on
于 2012-07-03T14:33:10.530 に答える