Horizontal Scroll

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:hidden; (the overflow-y property defines the vertical overflow).

Example:

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.

HTML code:

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.