Hiding and showing scroll bars with JavaScript

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:

show-scrollbars
hide-scrollbars

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">
    <ul>
        <li>List of stuff 1</li>
        <li>List of stuff 2</li>
        <li>List of stuff 3</li>
        <li>List of stuff 4</li>
    </ul>
</div>

<script type="text/javascript">
   YAHOO.util.Dom.addClass("myBody","show-scrollbars");
</script>

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.

Tags: firefox, ie6, ie7