O'Reilly logo

JavaScript & DHTML Cookbook by Danny Goodman

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating a Custom Scrollbar

NN 7, IE 5

Problem

You want to let users scroll through a separate block of content within the page via a scrollbar containing line and page regions, as well as a draggable scrollbar thumb.

Solution

This solution requires numerous HTML elements that are used as both scrollable content containers and a simulated scrollbar. You can see the HTML portion in Example 13-7 of the Discussion. You then use the scrollBars.js library, shown in Example 13-8 of the Discussion, as the script basis for both generating and controlling customized scrollbars on your page.

Your HTML page needs to link in and initialize two JavaScript libraries: DHTMLAPI.js from Recipe 13.3 and scrollBars.js. Initializations should go in the onload event handler of the body:

<body onload="initDHTMLAPI( ); initScrollbars( )">

The initScrolbars( ) function invokes a function that is not necessarily part of the scrollBars.js library because it specifies HTML details of each custom scrollbar on the page. For example, the following initScrollbars( ) function both creates a JavaScript object that governs the scrollbar associated with a fixed set of HTML elements, and creates the HTML pieces for the visible scrollbar:

function initScrollbars( ) {
    scrollBars[0] = new scrollBar("pseudoWindow", "outerWrapper", "innerWrapper");
    scrollBars[0].appendScroll( );
}
...
<body onload="initDHTMLAPI( );  initScrollbars( )">

Discussion

This solution is an extension of Recipe 13.12, but with far more complex issues ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required