Products
Services
Contact Us

Scripts: DHTML :: Scrollable Divs :: Library Article #6

Developer's Section

Create a Scrollable Div with Custom Scroll Bars
By: Erobo Team Member

Hire a Developer for Related Work / Installation | $55 hr
Rating:  | Rate It:   
Average Votes: (1867)
Favorites:

Learn to create a scrollable div with custom scroll bars using javascript and css.

In the following code snippet we are going to try to recreate a scrollable div that uses custom scroll bars. We will be using the js files: dom-drag.js custom_scroller.js and two images for the scrollers: arrow_up.gif and arrow_down.gif.

For example:

This is line 1 - keep Scrolling

This is line 2 - keep Scrolling

This is line 3 - keep Scrolling

This is line 4 - keep Scrolling

This is line 5 - keep Scrolling

This is line 6 - keep Scrolling

This is line 7 - keep Scrolling



Here is the Source Code:

 Code Snippet 1

<style type="text/css">
<!--
#container {
position : absolute;
top :0px;
left : 2px;
width : 330px;
height : 140px;
background : white;
overflow : hidden;
border : 1px solid #D08847;
z-index     : 400;
    
}

#content {
position : relative;
width : 320px;
left : 5px;
z-index     : 400;
}


#scrollArea {
position : absolute;
left : 338px;
top : 18px;
height : 104px;
width : 15px;
border : 1px solid #667;
overflow : hidden;
        
}

#scroller {
position : absolute; 
top : 18px;    
width : 15px;
background : #AAA;
border-top : 1px solid #667;
border-bottom : 1px solid #667;
}

#scroll_arrow_up {
position : absolute; 
top : 0px;     
width : 15px;
left : 338px;    
border      : 1px solid #667;
text-align  : center;
cursor      : pointer;
}

#scroll_arrow_down {
position : absolute; 
top : 125px; 
width : 15px;
left : 338px; 
text-align  : center;
border    : 1px solid #667;
cursor      : pointer;
height: 16px;
}
-->
</style>
    <script type="text/javascript" src="yourscripts/dom-drag.js"></script>
    <script type="text/javascript" src="yourscripts/custom_scroller.js"></script>
    <script type="text/javascript">
    onload = scroller.init;
    </script>
    
    <!-- scroll area start -->
    <div id="custom_scroller" style="position:relative;height:145px;padding:2px;">
    <div id="scroll_arrow_up"
     onmousedown="scrollUp(event)" 
     onmouseup="cancelScrolling(event)"
     onmouseout="cancelScrollingOut()">
     <img src="6/images/arrow_up.gif"></div>
    <div id="scroll_arrow_down" 
     onmousedown="scrollDown(event)" 
     onmouseup="cancelScrolling(event)"
     onmouseout="cancelScrollingOut()">
     <img src="6/images/arrow_down.gif"></div>
    <div id="scrollArea">
    <div id="scroller"></div>
    </div>

    <div id="container">
      <div id="content">
      <p>This is line 1 - keep Scrolling</p>
      <p>This is line 2 - keep Scrolling</p>
      <p>This is line 3 - keep Scrolling</p>
      <p>This is line 4 - keep Scrolling</p>
      <p>This is line 5 - keep Scrolling</p>
      <p>This is line 6 - keep Scrolling</p>
      <p>This is line 7 - keep Scrolling</p>
      <p> </p>
      <p> </p>
      </div>
    </div>
    
    </div>
    <br style="clear:all"></br>
    <!-- end of scroller -->



Downloads
dom-drag.js3.8 KB
custom_scroller.js3.9 KB
arrow_up.gif0.9 KB
arrow_down.gif0.3 KB
 

See other Scripts in Scrollable Divs

Submit Your Scripts:

If you would like to have your DHTML scripts published in this section please fill out
the form below:
*Your Name or Username:
Home Town:
*Email:
*Description and Code:
*Enter Code shown
to the right:

[ Refresh Image ]