Click here to Skip to main content
Click here to Skip to main content
Go to top

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.

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

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.

License

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

Share

About the Author

keaukraine

Ukraine Ukraine
No Biography provided

Comments and Discussions

 
GeneralMy vote of 1 PinmemberMG.Karo27-May-09 21:42 
General[Message Deleted] PinmemberTalking Clipboard19-May-09 5:42 
GeneralRe: My vote of 1 Pinmemberkeaukraine20-May-09 1:59 

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

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

| Advertise | Privacy | Mobile
Web01 | 2.8.140922.1 | Last Updated 20 May 2009
Article Copyright 2009 by keaukraine
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid