CSS Tips & Tricks

You can create a CSS layer that scrolls when its content exceeds the dimension of the viewable area defined. All you need is to specify the overflow rule in your layer style definition: #layer{overflow:scroll;}

Unfortunately both the vertical and horizontal scroll bars are displayed even though in most cases we just need the vertical scrolling of the content.
You will learn here how to “get rid off” the horizontal scroll bar.

Option 1) Most designers create graphic image of the vertical scrollbar then use a javascript function to scroll the content of the layer based on specific mouse events: rollover or click.

This solution certainely has its appeals and offers the ability to customize your vertical scrollbar look-and-feel. However it requires extra code (javascript), graphic design skills and extra files to download.

Option 2) A much easier approach is to use CSS and take advantage of the already existing scrollbars functionality in your web browser.

The trick is to just hide the horizontal scrollbar.

All you need is three CSS Layers: #Layer1, #Layer2, #Layer3

a) Layer1 defines the scrollable view area.
b) Layer2  is non scrollable and contains the Layer1. Its height should have about 17 px less in order to hide the horizontal scrollbar in Layer1. The with of Layer1 and Layer2 could be of the same width.
c) Layer3 where you page content will be inserted. It’s contained by Layer1
It can have the same (or less) width as layer2.

Below is an example:
#Layer1 {
 position: relative;  visibility: inherit; display: inline;  margin: 0px; padding: 0px;
left: 0px; top: 0px; text-align: left; vertical-align: top; clear: both; float: left;
width: 695px; height: 557px; overflow: scroll;
}

#Layer2{
 position: relative; visibility: inherit; display: inline;  margin: 0px; padding: 0px;�
left: 10px; top: 10px; text-align: left; vertical-align: top; clear: both; float: left;
width:695px;  height:540px; overflow: hidden;
}

#Layer3 {
 position:relative; visibility: inherit; display: block; margin: 0px; padding: 0px;
 left: 0px; top: 0px;text-align: left; vertical-align: top; float: left; clear: both;
 width:700px; height:700px;  overflow: visible;
}

Notice the width, height and overflow CSS rules on the 3 layers. Other rules are for positioning each layer and its content.

The HTML code would be:
<div id=”Layer2″>
<div id=”Layer1″>
<div id=”Layer3″>Your content should go here </div>
</div>
</div>

You can put any type of information in Layer3: text, pictures, movies… just about anything that can go in a web page.
You can also use CSS rules to customize the look-and-feel of your scrollbars.

Of course this post applies only to the scrollbars in a layer and not the web browser’ scrollbar. To get rid off your web browser horizontal scrollbar, make sure the content of your web page does not exceed the width of the viewable area of your web browser.

No matter what the screen resolution your web site is optimized for, always leave off about 20px or more to take into account the width of the ever present vertical scrollbar.

This entry was posted on Saturday, November 25th, 2006 at 2:09 pm and is filed under CSS Tips & Tricks. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.