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

Scrollbars for Navigator 4 LAYERs, Part I
concepts

As you no doubt have realized, the scrollbar, although it looks and reacts just like an OS scrollbar, has been created using layers and images. User events are processed by a script, which substitutes images and moves the scrollbar thumb and layer content. Try it again:

We will create a vertical scrollbar only. You can set the wrapping width for a layer (in fact, it is a must) so a horizontal scrollbar is not a necessity. You should, also, not load layers with complicated files, containing DHTML and anything more than rudimentary CSS styling. The external files should include only simply styled text and images, if you don't like surprises.

Our final script, allowing dynamically-created scrollbars for multiple elements on a page, and requiring a minimum of author input, will be completed in our next column. For now, we will create one layer and one accompanying scrollbar. Our emphasis will be on the logic of the script routines, not on the creation and positioning of layers and their accompanying scrollbars. Once we have understood the logic in this first simple format, we can then easily adapt the routines into a truly dynamic cross-browser script.

Scrollbar Behavior Defined

First of all, to help us in building the script, we must define scrollbar behavior as a series of points that answer the question: What exactly occurs when we use a scrollbar? Our points are based on the standard Win32 scrollbar behavior. Content refers to the scrolling page controlled by the scrollbar:

1. When we drag the scrollbar "thumb" (the movable stub between the arrow buttons), the content moves porportionally in the opposite direction.

2. When the thumb reaches its bottom-most position, the content has scrolled off the top of the page except for the last screenfull (end of content).

3. When the thumb reaches its top-most position, the content's first screenfull is displayed. (beginning of content).

4. When dragging the thumb, the thumb position is always changed. The content position then conforms to the thumb's position.

5. When we click on the "elevator bar" (the scrollbar lighly-shaded background), the thumb moves in the direction of the mouse click, by a distance equal to the thumb's height. If the thumb is 50 pixels high, it will move 50 pixels up or down. The content position will adapt to the thumb's new position, as with the thumb drag.

6. If we mousedown on the elevator bar, without an immediate mouseup, then the thumb moves as in the preceding point, but after an interval it repeats the move, and continues to repeat it at short intervals until we either mouseup or it reaches the position of the mouse. The content will adjust position with each move.

7. When the elevator bar is clicked, the part under the mouse changes to a darker color. If we click below the thumb, the section of the elevator bar between the thumb and the bottom arrow button becomes darker. If we click above the thumb, the section of the elevator bar between the thumb and the top arrow button changes. The original light shade returns when the thumb has stopped moving.

8. When we click on the bottom arrow, the content position is incremented first, then the thumb position is adjusted. If the content is very long, the thumb may not change position immediately, but only after a content incrementation porportional to a one-pixel move for the thumb is achieved. Notice this difference! If the arrows moved the thumb, like the other two instances above, then there could be parts of the content that are never seen. It is conceivable that a one-pixel thumb move is equal to more than one screenfull of content, and since the smallest move is one pixel, moving the thumb first would cause the content to scroll by irrational incrementations.

9. When we click the top arrow, the content position is decremented, and the thumb position is adjusted to conform, following the logic of the previous point.

10. As with the elevator-bar mousedown, an arrow button mousedown causes the content position to be incremented/decremented at regular short intervals after an initial incrementation and short wait. This repetition ends upon mouseup.

11. When the arrow buttons are pressed, they change to a "depressed" state until mouseup.

12. If we mousedown on the buttons, and scrolling begins, and we then mouseout without a mouseup, scrolling stops and the button is no longer depressed. With our mouse button still pressed, if we move back over the button, it depresses and scrolling resumes.

13. If we mouseout of the thumb while dragging it, the scrolling is not halted. This is a courtesy to users so that they don't have to be exact when moving the mouse. If the mouse pointer moves too far off the thumb while dragging, the scrolling stops. Our scrollbar, however, only stops upon mouseup when dragging the thumb.

There you have it. Now, if we can achieve all this through JavaScript, and we can, we have a scrollbar! Before we get to the script, however, we should take a look at how we create the scrollbar, visually.

Produced by Peter Belesis and

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