Horizontal Scrollbar
Most scroll boxes contain both vertical and horizontal scrollbars. At least, both scrollbars will appear whenever they're needed. But you don't actually need to have both appear. You could have just the horizontal scrollbar appear for example.
This page contains code for creating horizontal scrollbars. That is, a scroll box that only has a horizontal scrollbar - one that goes left and right (as opposed to a vertical scrollbar, which goes up and down). To create a vertical scrollbar, see this article on how to create a vertical scrollbar.
Feel free to copy and paste the horizontal 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 Horizontal Scrollbar Code
The following example demonstrates how to specify that only a horizontal scrollbar should appear on your scroll box. To create a horizontal scrollbar, we use overflow-x: scroll. Also, to prevent the vertical scrollbar from appearing, we use overflow-y: hide.
| Source Code |
Result |
|
Here's a demonstration of how to make a scroll box with a horizontal scrollbar. Note that to demonstrate the scrollbar properly, I've made this text wider than the actual scroll box.
|
Horizontal Scrollbars - on Whole Web Page
You can use a similar principle to force the browser's horizontal scrollbars to appear when viewing a webpage. Actually, because the browser automatically creates scrollbars when needed, you don't actually need to specify overflow-x at all. All you need to do is force the page to be wider than the browser window. This is easy. All you do is specify that the width of the body tag is more than 100 percent as wide as the window.
To see the browser's horizontal scrollbars, check out this example (opens in new window).
And, here is the code that I used for the above example:
