For a while now, "DHTML scroll bars" have been a popular thing to put on one's site. They are by no means an easy thing to create, however. If you are new to JavaScript, we recommend that you either (a) wait until you become more familiar with the language and it's integration with HTML, or (b) use a free script provided by someone else.
Here are a few pointers if you're interested in making your own:
1. A simple scroller can be made to work in recent browsers by placing content in a DIV tag, and then giving that tag a style sheet with overflow:auto specified. For example:
...
<div id="scrollbox">Text text text text text.</div>
The two major downsides to this method are: (a) it will not work in Netscape Navigator 4.x or other old browsers or Opera - in those browsers, the div will expand to fit the text that it holds (you should check in these browsers as sometimes it can expand under or over other content), and (b) you have no control over the way the scrollbar looks (except with Internet Explorer's scrollbar style sheet properties).
[Update: It appears that Opera 7 will support oveflow:auto which makes this effect look like an excellent and simple way of getting a scroller in the Big Three browsers]
2. If you want more control than the above method offers, here are some pointers to begin with. Giving you step by step instructions is really out of the question, because of the complexity of the concept. However, if you have the knowledge and the patience to look further into it, these pointers should help you get started:
(a) The most successful method is creating a div with a set width and height, overflow:none, and clipped (with style sheets) to the size you want to make the scroller. This div must have position:absolute for Netscape Navigator 4.x to behave correctly. Inside this div should be another div: this div should also have position:absolute, and should contain all the scroller's content. Since this div is absolutely positioned, you can move it up and down within the other div, creating a scrolling effect. Moving it up and down requires the use of JavaScript to access the element.
In old versions of IE, this is done in this way:
document.all.theIdOfTheDivTag.style.pixelTop = 0;
In NN 4.x:
document.theIdOfTheContainingDivTag.document.theIdOfTheDivTag.top = 0;
In more recent browsers supporting Document Object Model standards (Such as Mozilla):
document.getElementById("theIdOfTheDivTag").style.top = 0 + "px";
(b) In order to know how far vertically it should move, you will need its height. This can be obtained after the page loads with the following code:
In old IE:
document.all.theIdOfTheDivTag.offsetHeight
In NN 4.x:
document.theIdOfTheContainingDivTag.document.theIdOfTheDivTag.document.height
In browsers that support the DOM:
parseInt(document.getElementById("theIdOfTheDivTag").offsetHeight)
(c) The scroll bar itself will have to be made up of absolutely positioned elements, so that you can align them with the containing div and so that you can move the scrollbar around. You will need to work with mousedown and mouseup events on these, which will most likely require returning false in order to keep the browser from thinking you're trying to drag an image.
The rest is just math, and that will be left as an exercise for the reader. =)
As of writing this FAQ is number 6 at Google in the search for the terms cross, browser, scroller and the phrase "cross browser scroller" . Previously the terms were number 7.
__________________
Why am I having trouble with cross-browser DHTML?