Vertical Scroll

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 overflow-x:hidden.

Also, in this example, I add overflow:scroll before the overflow-y:scroll and overflow-x:hidden. I do this in case the browser doesn't recognize the overflow-y property (overflow-y and 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).

Example:

CodeResult

By using overflow-y, we can create scroll bars when the contents of this div are bigger/higher than the container. Also, by setting this paragraph to 250 percent, it is automatically 250 percent higher than the parent container - forcing an overflow.

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.

HTML code:

Copy to Clipboard
<!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?

  1. Link to this page (copy/paste into your own website or blog):
  2. Link to Quackit using one of these banner ads.

Thanks for supporting Quackit!

Sponsored Link: Design CODE-FREE Websites