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: (2928)
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:


System Message:
  • Your DHTML script has been sent. Please allow 48 hours for processing.


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 ]