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:
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:
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.