FREE HTML CODE
Search HTML Code

Vertical Scroll

Basic Vertical Scroll Box

To make a scroll box with a vertical scroll, you need to use overflow-y:scroll;. This tells your browser to create scroll bars on the y (vertical) axis whenever the contents of the container is too big/high. Here, we make our content too big simply by adding too much text to fit into the div. We can also make the contents too big by setting it's height to 200 percent (similar to what I did to the width of this horizontal scroll box). Therefore, we could force vertical scroll bars with minimal or no content.

To prevent horizontal scroll bars from appearing, you can use overflow-x:hidden.
Also, in this example, I add overflow:scroll before the overflow-y:scroll and overflow-x:hidden. I do this in case the browser doesn't recognize the overflow-y property (overflow-y and overflow-x weren't part of the official CSS specification until the CSS 3 working draft). In the case that the browser doesn't recognize these tags, you will still get scrolling. And if your content is simply text, it will most probably be a vertical scroll bar (due to the text wrapping over to the next line).

Example:
By using overflow-y, we can create scroll bars when the contents of this div are bigger/higher than the container. Also, by setting this paragraph to 250 percent, it is automatically 250 percent higher than the parent container - forcing an overflow.

HTML code:


Vertical Scrolling Webpage


The same principle can be used to create a vertical scroll bar on the whole web page. As long as the contents on the page is higher than the user's browser window, vertical scroll bars will automatically appear. In the following example, the body element has had a height of 4000 pixels. As long as the browser window is less than 4000 pixels high, vertical scroll bars will appear to the right.
Note that you can also use a percentage value (like we did in the above scroll box), but not all browsers will automatically display the scroll bar.
Here's an example of forcing vertical scrolling on a webpage.
HTML code:


You don't need to set the whole page to be higher than the page (i.e. you don't need to set a height for the body tag). For example, you could just set the height of a div tag instead. As long as this is high enough, it would also result in a vertical scroll bar.








| More