Question

I don’t want to use a plugin-in for scrolling. Instead I made my own scrollbar(not completed it is in start up), it works somewhat fine in Chrome, but it is not in Firefox. Sometimes the scroll ‘sticks’, as well. Can anyone help – indicating if my way is correct? Or, do I need to concentrate further on any areas using mouse events?

Here is my jsFiddle:

jsfiddle link here

till my code :

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

    })();
})

thanks in advance.

Answer 1

You’re binding the mousemove event to the element itself, so it does only get triggered within the element boundaries.

In your case, I would suggest you wrap the element in a div (scrollbar) and trigger the mousemove on that:

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