I’ve been developing a portal site using ruby on rails and script.aculo.us and I wanted to be able to scroll the contents of some of the ‘portlets’ but I wanted the scrollbars to match the overall appearance of the page, which the standard scrollbars don’t. I’d seen this done before so I assumed that script.aculo.us would have implemented such a thing, but they hadn’t. I managed to find some examples of scrollable div javascript libraries on the net of which the best are probably fleXcroll and the scrolling layer content page at dyn-web, but I had a couple of concerns like: Would they work if the content were updated via Ajax? Would they live in harmony with script.aculo.us?

So in the end I decided to implement my own (I seem to live my life saying to myself; ‘how hard could it be’?). This is the result. It is certainly not as accomplished as fleXcroll, but it works fine if content is updated using Ajax and it re-uses scipt.aculo.us classes so its pretty small and is guaranteed to play nice with it too. (BTW – its based pretty heavily on this one. I couldn’t see any licensing terms, but credit where credit is due).

If you use Ajax to re-write the original div you will need to make sure it has an id and then call Scroller.reset() once the update is complete. For example if the div has id body_1 then you should call Scroller.reset(”body_1″) to wrap just that div with a scrollbar.

The appearance of the scrollbar can be controlled using a stylesheet. The scrollbar itself has class scroll-track, the thumb (the part you grab) has class scroll-handle. This is the stylesheet I use at the portal above:

.scroll-track{
 height:10px;
 width:10px;
 background:black;
}

.scroll-handle{
 border: 1px solid black;
 height:10px;
 width:10px;
 background:#5B207B;
 cursor:pointer;
}

Obviously you could set the classes to use images as the background too if you wanted – which is what the examples on this page do.

Demo: http://www.jools.net/projects/javascript/scrollable-divs/

Download: http://jools.net/wsvn/Projects/trunk/scroller/scroller.js

Source: http://www.jools.net/projects/javascript/scrollable-divs/

Related Listings:

1. FleXcroll- Accessible Custom Scroll Bars Custom scroll bars are usually bad, and they should be...
2. Flash News Scroller Wizard Flash News Scroller Wizard is a tool that allows you...
3. Scrollable Elements usign jQuery Plugin You can study the workings of Scrollable in the following...
4. Transparent Custom Corners The technique for creating a flexible box with Transparent custom...
5. Sliding RSS Feed Script A great, slick way to display RSS feeds. Nice and...

Do you like this post?

Email: