Custom Scrolling Container

• Download source - 22.42 KB

Introduction 

There are quite a lot of different JavaScript implementations of custom scrolling areas, but I haven't found what I needed so I've made a custom one. 

Most of these scrollers have a scrollbar which isn't what I needed. The typical usage of this scroller is to add scroll buttons to some control or content which doesn't have them. I used it to add scrolling ability to AJAX controls (I won't advertise its developer by naming it here, quite a well-known one).  

Example of usage (3^rd party AJAX accordion control with top and bottom scroll buttons applied to it):  

Please note that example source code doesn't have all these images and styles you see in the screenshot, because this UI design is going to be used in a real commercial product and I don't have permission to publicly distribute it.

Background   

It is very simple to use, because you won't write JavaScript code to initialize scrollers for every DIV element you want to have scrolling. Only set up HTML+CSS and include 3 JavaScript files and scrollers will be present.

Using the Code   

I've made it using jQuery so you'll need to add some JavaScript includes in order to use it.

Here are all the needed includes in order to use this scroll area:

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" src="scrollarea.js"></script>	

DIV elements which should have scrolls should look like this:

    <div class="scrollable" style="width: 250px; height: 250px;">
        <span class="scrollup"></span>
        <div class="scrollcontent" id="scroll" style="width: 250px; 
			height: 230px; background-color: #FFFF90;">
            ...content... 
        </div>
        <span class="scrolldown"></span>
    </div> 

DIV with CSS class "scrollable" should contain all elements in it. Span elements with classes "scrollup", "scrolldown", "scrollleft" and "scrollright" are used to create buttons which will scroll content placed inside DIV with "scrollcontent" class.

Change all these classes in your custom CSS file to achieve the desired look of scroll buttons.