This page contains code for a vertical scroll. This enables you to create a scroll box with a vertical scroll bar (and without the horizontal scroll).
If you need to create a scroll box with horizontal and vertical scrolling, check out this HTML scrollbox code.
Basic Vertical Scroll Box
To make a scroll box with a vertical scroll, you need to use
overflow-y:scroll;. This tells your browser to create scroll bars on the y (vertical) axis whenever the contents of the container is too big/high. Here, we make our content too big simply by adding too much text to fit into the div. We can also make the contents too big by setting it's height to 200 percent (similar to what I did to the width of this horizontal scroll box). Therefore, we could force vertical scroll bars with minimal or no content.
To prevent horizontal scroll bars from appearing, you can use the
overflow property. More specifically, you use
Also, in this example, I add
overflow:scroll before the
overflow-x:hidden. I do this in case the browser doesn't recognize the
overflow-y property (
overflow-x weren't part of the official CSS specification until the CSS 3 working draft). In the case that the browser doesn't recognize these tags, you will still get scrolling. And if your content is simply text, it will most probably be a vertical scroll bar (due to the text wrapping over to the next line).
Vertical Scrolling Webpage
The same principle can be used to create a vertical scroll bar on the whole web page. As long as the contents on the page is higher than the user's browser window, vertical scroll bars will automatically appear. In the following example, the
body element has had a height of 4000 pixels. As long as the browser window is less than 4000 pixels high, vertical scroll bars will appear to the right.
Note that you can also use a percentage value (like we did in the above scroll box), but not all browsers will automatically display the scroll bar.
Here's an example of forcing vertical scrolling on a webpage.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Vertical Scroll Bar Example</title> </head> <body style="height:4000px;"> <h1>Vertical Scrolling</h1> <p>If your monitor is less than 4000 pixels high, your browser's vertical scroll bar should now be displayed...</p> <p>Back to <a href="/html/codes/vertical_scroll.cfm">Vertical Scroll</a></p> </body> </html>
You don't need to set the whole page to be higher than the page (i.e. you don't need to set a height for the
<body> tag). For example, you could just set the height of a
div tag instead. As long as this is high enough, it would also result in a vertical scroll bar.
Enjoy this page?
- Link to this page (copy/paste into your own website or blog):
- Link to Quackit using one of these banner ads.
Thanks for supporting Quackit!