Your web home for how to's for web beginners. A jargon-free zone dedicated to helping your web knowledge grow.

Help For Web Beginners

Scrolling & Viewing More

Scrollbars: Show Me More

Just like a magazine article may extend over several pages, so can information on a website.

If you have been successfully navigating this site, you already know how to scroll down a page using your arrow keys.

See that, you already knew something and probably didn't give yourself credit for knowing it.

Using the arrow keys to scroll down a page will work with most websites. However, with some websites, the arrow keys may not move the page the way you wish.

Scrollbars: The Good News

It is rare for a page on the Internet (webpage) to not require the visitor to scroll down the page. It is more rare for a webpage to require the visitor scroll horizontally (left and right) on the page.

Scrollbars: The Great News

The great news is that whether scrolling up and down or left to right, the technique is virtually the same.

What does a Scrollbar look like?

The box of text that follows this sentence has a vertical scrollbar on the right side.

Scroll bars are tools that allow you to control what part of the page you are currently looking at. Think of it as turning the pages in a magazine.

This is an area designed so you can get the feel of using scrollbars.

These words are longer than the box they are shown in and that causes the scrollbar to be needed on the right side.

You might see a box similar to this on other websites. They are used to allow the site visitor to enter information and send a message to the website owner. This box is just to give you a place to play with using scrollbars.

Be sure to click somewhere on this webpage, outside of this box to be able to use your arrow keys to view the rest of this page.

A small box with a downward facing triangle is identified as the downward control for a scrollbar. The area circled in red on the picture to the left shows the downward control of a scrollbar. Using the picture to the left as a guide, find the downward control of the scrollbar in the box above. Click on the control several times and you should see the text roll up the screen.

If this small box with a triangle pointing down is the downward control, I bet you can figure out that the box with the triangle pointing upwards is the upward control. Click there to confirm you are right.

How To Scroll Up & Down the Screen

Look around your screen. There should be another vertical scrollbar on your screen. I'll give you a hint, it is on the right side and looks just like the one in the sample above but only larger.

Find the downward control down button of a scrollbar on scrollbar to the right and click a few times. You should begin to see the text on this page move up the screen and new information be displayed below.

Now take your mouse and point the arrow at the upward control  up button of a scrollbar. Click a few times and watch what happens, you should see something moving besides the words and letters on this page.

Did you see the rectangle between the two control buttons moving up or down when you clicked? If not, click on one of the controls again and watch the area between them.

That skinny rectangle is also part of the scrollbar and is another way to control what is displayed on the screen. Take the mouse and point the arrow somewhere on the rectangle that has been moving. Click and hold the mouse button down while moving the mouse up or down. You should notice that the text in the box or screen is scrolling in the direction you are moving that rectangle.

How long is this How To?

That rectangle also serves another purpose. It can tell you how long the webpage you are viewing is. The smaller the box, the more screens the webpage takes. The larger the box, the fewer screens the webpage takes. If the scrollbar is absent completely that tells you that the webpage is currently shown in its entirety.

Using a Scrollbar to fast forward or reverse

Now to fast forward or reverse. The lighter colored part of the scrollbar where the rectangle seems to be in a track is another part of this tool. If you use your mouse and point to that part of the scrollbar (where the rectangle isn't) and click. It will cause the page being viewed to scroll up or down a screen-full at a time.

Scrolling from Left to Right

Most consider good web design to include pages that do not require horizontal (left to right) scrolling. It is somewhat more common on websites designed as portfolios to showcase the work of an artist. If you made the letters appear larger on the screen (see Changing Text Size for more on this), you may have created the need for horizontal scrolling.

Fortunately, horizontal scrolling is accomplished the same way as vertical scrolling. Unfortunately, this page is designed not to need horizontal scrolling, so you won't be able to try it out here. The only difference is that the small triangles point to the left or right instead of up or down.

Hurray, you just learned another way to look at websites!

What if there are no scrollbars but there is more information?

There is a method of creating websites that uses a technique called Frames. While the use of Frames makes it easier for the website owner to create and modify their website, it can lead to challenges for new users and drives most everyone batty. Should you try to use only your arrow keys or scroll bars to navigate a page using Frames, you may not be able to view all of the information the way you wish. If you find that using your arrow keys and the scrollbars are not advancing the text, please visit Navigating & Scrolling with Frames, to learn how to view websites that use Frames.

Be sure to check out Help For Web Beginners other Beginner Internet Tutorials.

About the Author is a website dedicated to providing free, easy to understand, online How To's for true web beginners. While the materials are not free or available for reprints, they are offered freely for individual use. Please use the contact page to let Michele know if this tutorial has been helpful or if there are any other beginner web programming related tutorials you would like to see.