Custom scroll bar stutters…

Hello!

I’m having some trouble debugging a scroll bar I’m trying to implement. You can see the example here:

[URL=”http://cameronmcefee.com/development/demo”]http://cameronmcefee.com/development/demo[/URL]

The problem is that when it approaches the left or right limit, it stops short, unless the user is dragging it [I]very slowly[/I], in which case it can make it to the limits. I can’t seem to figure out what the problem is. Any ideas? Firefox and Safari and Opera all have this problem. I haven’t checked IE yet.

Here is the js:

[CODE]var _startX = 0; // mouse starting positions
var _startY = 0;
var _offsetX = 0; // current element offset
var _offsetY = 0;
var _dragElement; // needs to be passed from OnMouseDown to OnMouseMove
var _oldZIndex = 0; // we temporarily increase the z-index during drag
var leftBound = 0;
var rightBound = 433;

//var _bounds =
//var _debug = $(‘debug’); // makes life easier

InitDragDrop();

function InitDragDrop() {
document.onmousedown = OnMouseDown;
document.onmouseup = OnMouseUp;
}

function OnMouseDown(e) { // IE is retarded and doesn’t pass the event object
if (e == null)
e = window.event;

// IE uses srcElement, others use target
var target = e.target != null ? e.target : e.srcElement;

/*_debug.innerHTML = target.className == ‘drag’
? ‘draggable element clicked’
: ‘NON-draggable element clicked’;*/

// for IE, left click == 1
// for Firefox, left click == 0
if ((e.button == 1 && window.event != null || e.button == 0) && target.className == ‘drag’) {
// grab the mouse position
_startX = e.clientX;
_startY = e.clientY;

// grab the clicked element’s position
_offsetX = ExtractNumber(target.style.left);
_offsetY = ExtractNumber(target.style.top);

// bring the clicked element to the front while it is being dragged
_oldZIndex = target.style.zIndex;
target.style.zIndex = 10000;

// we need to access the element in OnMouseMove
_dragElement = target;

// tell our code to start moving the element with the mouse
document.onmousemove = OnMouseMove;

// cancel out any text selections
document.body.focus();

// prevent text selection in IE
document.onselectstart = function () { return false; };
// prevent IE from trying to drag an image
target.ondragstart = function() { return false; };

// prevent text selection (except IE)
return false;
}
}

function OnMouseMove(e) {
var contentDiv = document.getElementById(“content”);
var contentCols = 2;
var contentWidth = (contentCols*300);

if (e == null)
var e = window.event;
var pos = (_offsetX + e.clientX – _startX);
// this is the actual “drag code”
if( pos >= leftBound && pos <= rightBound ) {
_dragElement.style.left = pos + ‘px’;
var scrollPercent = pos/rightBound;
var conentScrollValue = scrollPercent*contentWidth;
contentDiv.style.left = (0-conentScrollValue) + “px”;
} /*else if (pos < leftBound) {
alert(contentDiv.style.left);
_dragElement.style.left = leftBound;
contentDiv.style.left = “0px”;
} else if (pos > rightBound) {
_dragElement.style.left = rightBound;
contentDiv.style.left = (0-contentWidth) + “px”;
}*/
//_dragElement.style.top = (_offsetY + e.clientY – _startY) + ‘px’;

//_debug.innerHTML = ‘(‘ + _dragElement.style.left + ‘, ‘ + _dragElement.style.top + ‘)’;
}

function OnMouseUp(e) {
if (_dragElement != null) {
_dragElement.style.zIndex = _oldZIndex;

// we’re done with these events until the next OnMouseDown
document.onmousemove = null;
document.onselectstart = null;
_dragElement.ondragstart = null;

// this is how we know we’re not dragging
_dragElement = null;
//_debug.innerHTML = ‘mouse up’;
}
}

function ExtractNumber(value) {
var n = parseInt(value);
return n == null || isNaN(n) ? 0 : n;
}

// this is simply a shortcut for the eyes and fingers
function $(id) {
return document.getElementById(id);
}[/CODE]

Also in #JavaScript _↴