FREE HTML CODE
Search HTML Code

Horizontal Scroll

Basic Horizontal Scroll Box

To make a scroll box with a horizontal scroll, you need to use overflow-x:scroll;. This basically 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;.
Example:
By using overflow-x, we can create scroll bars when the contents of this div are wider than the container. By setting this paragraph to 250 percent, it is 250 percent wider than the parent container - forcing an overflow.

HTML code:



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.






| More