-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 回答