Question

我不想使用插件进行滚动。相反，我制作了自己的滚动条（没有完成它是在启动时），它在Chrome中工作得有点好，但它不在Firefox中。有时卷轴“粘”。任何人都可以帮忙 - 表明我的方式是否正确？或者，我是否需要使用鼠标事件进一步集中于任何区域？

这是我的jsFiddle：

jsfiddle link here

直到我的代码：

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

    })();
})

提前感谢。

Answer 1

您将mousemove事件绑定到元素本身，因此它只会在元素边界内触发。

在你的情况下，我建议你将元素包装在div（滚动条）中并触发鼠标移动：

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

任何人纠正我的Scroller Buggy？

1 个答案: