Click here to Skip to main content
13,085,908 members (96,532 online)
Click here to Skip to main content
Add your own
alternative version


7 bookmarked
Posted 19 May 2009

Custom Scrolling Container

, 20 May 2009
Rate this:
Please Sign up or sign in to vote.
Container to create custom-styled scrolling area. Supports mouse wheel scrolling.


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 (3rd 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.


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;">
        <span class="scrolldown"></span>

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.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Ukraine Ukraine
No Biography provided

You may also be interested in...


Comments and Discussions

GeneralMy vote of 1 Pin
MG.Karo27-May-09 21:42
memberMG.Karo27-May-09 21:42 
General[Message Deleted] Pin
Talking Clipboard19-May-09 5:42
memberTalking Clipboard19-May-09 5:42 
GeneralRe: My vote of 1 Pin
keaukraine20-May-09 1:59
memberkeaukraine20-May-09 1:59 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170813.1 | Last Updated 20 May 2009
Article Copyright 2009 by keaukraine
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid