How to Set the Overflow Scroll Only in Vertical Direction CSS

If you take advantage of scroll boxes on your website, you have the ability to control the vertical behavior of the scroll bar using Cascading Style Sheets (CSS). This way, when the content goes past, or overflows, the boundaries of the box, you instruct the browser to only display the bar that goes up and down rather than left to right. Understand how to apply CSS to set the overflow scroll only in a vertical direction.

Instructions

1. Start your text editor program and open the Web page document that has the scroll feature.

2. Position your cursor before the closing "</head>" tag and type the following CSS code:

   <style type="text/css">

   <!--

   div { }

   -->

   </style>

   The div element is the tag that typically contains the scroll box on a Web page.

3. Type "overflow-y: ;" between the curly brackets and enter "scroll" after the colon. Further, type "overflow-x: ;" and enter "hidden" as the value. To illustrate:

   div { overflow-y: scroll; overflow-x: hidden; }

   The overflow-y attribute with the scroll value instructs the browser to display only a vertical scroll bar, while the overflow-x descriptor hides the horizontal bar.

4. Save your file and upload it to your Web host to publish your work to the Web.

References

• W3Schools: CSS How To
• W3Schools: CSS Overflow Property
• W3Schools: CSS Overflow-x Property
• W3Schools: CSS Overflow-y Property

Resources

• CSS-Tricks; The CSS Overflow Property; Chris Coyier; May 2009
• Quackit: CSS Overflow
• World Wide Web Consortium (W3C): Starting with HTML + CSS