This page contains code for a horizontal scroll. This enables you to create a scroll box with a horizontal scroll (but not the vertical scroll).
If you need to create a scroll box with horizontal and vertical scrolling, check out this HTML scrollbox code.
Basic Horizontal Scroll Box
To make a scroll box with a horizontal scroll, you need to use the
overflow-x property. Specifically, you need to use this code:
overflow-x:scroll;. This tells your browser to create scroll bars on the x (horizontal) axis, whenever the contents of the container is too wide. Here, we make our content too wide by setting it's width to 250 percent - that's 250 percent of its parent container (the div).
To prevent vertical scroll bars from appearing, you need to use
overflow-y property defines the vertical overflow).
Horizontal Scrolling Webpage
The same principle can be used to create a horizontal scroll bar on the whole web page. As long as the contents on the page is wider than the user's browser window, horizontal scroll bars will automatically appear. In the following example, the
body element has had a width of 120 percent. This forces the page to be 20 percent wider than the browser window.
Here's an example of what I mean.
<!DOCTYPE html> <html> <head> <title>Horizontal Scroll Bar Example</title> </head> <body style="width:120%;"> <h1>Horizontal Scrolling</h1> <p>Use the bottom scroll bar to scroll horizontally... go on...<span style="float:right;width:40px;">I didn't think you were even going to notice me over here!</span></p> </body> </html>
You don't need to set the whole page to be wider than the page (i.e. you don't need to make the
body tag 120%). You could have say, one
div element on the page set at 120%. As long as this is positioned correctly, it would also result in a horizontal 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!