DHTML Lab: Scrollbars for Netscape Navigator Layers - dhtmlab.com | 14

Scrollbars for Navigator 4 LAYERs, Part I
thumb scrolling

Mousing Down on the Thumb

If, while over the thumb, the user presses the mouse button, thumbDown() is called, which sets the scene for thumb dragging. The essentials of layer dragging were covered in column 6 and column 7.

function thumbDown(e) {
    curY = e.pageY;
    captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); 
    onmousemove = thumbMove;
    onmouseup = thumbUp;
    return false;
}

First we get the vertical page position of the mouse event (pageY) and assign it to our global curY variable. Then we capture both the mousemove and mouseup events. Upon a mousemove, thumbMove() is called. When the user releases the mouse button, thumbUp() is called. Again, we return false.

Moving the Thumb

Whenever a mousemove occurs, thumbMove() is called, and first compares the new mouse position (e.pageY) with the old one (curY). The difference (difY) is the vertical distance the mouse has moved, and this is the same distance we should move the thumb.

function thumbMove(e) {
    difY = e.pageY - curY;
    elThumb.top = Math.min(Math.max(elThumb.top+difY,barWidth),thumbMaxTop);
    docAlign();
    curY = e.pageY;
}

We move the thumb by difY, chcking always to not move over the arrow buttons. We then call docAlign() to move the content porportionally.

Aligning the Content

function docAlign(){
    thumbDiff = elThumb.top - barWidth;
    elMain.top = elMain.origTop - (thumbDiff*docPixels);
    elMain.clip.top = (thumbDiff*docPixels);
    elMain.clip.height = elMain.origHeight;
}

In docAlign(), the distance the thumb has moved from its initial position (thumbDiff) is determined by subtracting its initial position (barWidth) from its present position (elThumb.top). If we multiply thumbDiff by docPixels, we know how far the content should be from its original position. The content top and clip.top are then set using this information and the layer's clip.height is adjusted.

Mousing Up

Finally, thumbUp() is called when a mouseup occurs during or after a thumb drag:

function thumbUp() {
    releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
    return false;
}

thumbUp() simply releases the mousemove and mouseup events.

On the next page, we'll look at scrolling using the elevator bar.

Produced by Peter Belesis and

URL: https://www.webreference.com/dhtml/column23/NSscrThumb.html