Vertical Scrollbar
Most scroll boxes contain both horizontal and vertical scrollbars. Typically, both scrollbars will appear whenever they're needed. But you don't actually need to have both appear simultaneously. You could have just the vertical scrollbar appear for example.
This page contains code for creating vertical scrollbars. That is, a scroll box that only has a vertical scrollbar - one that goes up and down (as opposed to a horizontal scrollbar, which goes left and right). To create a horizontal scrollbar, see this article on how to create a horizontal scrollbar.
Feel free to copy and paste the following vertical scrollbar code into your own website, blog, MySpace page, or other HTML document. And feel free to modify the code as you wish.
Also, please consider keeping the link back to this website - if you do it will be very much appreciated!
Basic Vertical Scrollbar Code
The following example demonstrates how to specify that only a vertical scrollbar should appear on your scroll box. To create a vertical scrollbar, we use overflow-y: scroll. Also, to prevent the horizontal scrollbar from appearing when we don't need it, we use overflow-x: hide.
| Source Code |
Result |
|
Here's a demonstration of how to make a scroll box with a vertical scrollbar. Note that to demonstrate the scrollbar properly, I've made this text higher than the actual scroll box.
|
Vertical Scrollbars - on Whole Web Page
You can use a similar principle to force the browser's vertical scrollbars to appear when viewing a webpage. Because the browser automatically creates scrollbars when needed, you don't actually need to specify overflow-y at all. All you need to do is force the page to be higher than the browser window. This is easy. All you do is specify that the height of the body tag is more than 100 percent as high as the window.
To see the browser's vertical scrollbars, check out this example (opens in new window).
And, here is the code that I used for the above example:
