Vertical Scroller

3. Add to Your Page

What remains to be done in setting up our vertical scrollers is to position the scrollers on your web page with the appropriate size and appearance. This part of the setup is done by placing a div on the page where we want a scroller to appear. We set the id of the div to the same name as we used in the first parameter of the startScroll function call that we want to process the scroller and use stylesheet commands to define the size and appearance.

The first scroll box on my sample page is defined using the following div code in the body of the page where the scroller is to appear.

The size and appearance of that scroll box is defined using the following stylesheet commands.

The stylesheet commands can either be enclosed within <style></style> tags in the head of your page or included in an external stylesheet linked to your page. The position and overflow attributes must be specified exactly as shown. The width, height, and background-color attributes must be included but you can choose for yourself how big the scroll box will be and what colour. I included the border and margin attributes to tidy up the appearance of this scroll box. The second sample scroller does not include these attributes.

I used the following to link it into my sample page as an external stylesheet so that the scroller only appears on the screen in version 5+ browsers: