Have you received a requirement that says “We want to see this many elements before you add a scroll bar, we don’t care about the height of the elements, just the number”? If you are using YUI, there is a VERY easy way to handle this! YUI has the following 2 CSS classes which you can add either through javascript or other server side language:


The CSS for this is VERY simple:

.hide-scrollbars,.hide-scrollbars * {
    overflow: hidden;
.hide-scrollbars select {
    display: none;
.show-scrollbars {
    overflow: auto;

Now you have scroll bars on command through any language. Using YUI, implement this by addClass, and in Spry, addClassName.

<div class="myBody">
        <li>List of stuff 1</li>
        <li>List of stuff 2</li>
        <li>List of stuff 3</li>
        <li>List of stuff 4</li>

<script type="text/javascript">

I’m using the div id “myBody” as text above, but the function also accepts an array of elements, or a single element. You can also wrap addClass into a function that decides when to show or hide the scroll bars.