HTML Scrollbar Tutorial
Scroll bars are a small but often necessary part of a Web page. Whether visitors use them to scroll up and down the entire page or just within a section of it, almost every page needs at least one scroll bar. You may use a <div> tag to create a box that contains text, and use the "overflow" property to add scroll bars to it when text exceeds the boundaries of the box. The only real modification you may make to a scroll bar is to change its colors, and you may only do this in Internet Explorer. Firefox and Chrome prevent you from changing the colors.
Other People Are Reading
Instructions
-
-
1
Open the HTML file. Insert the cursor within the "head" element. Type the following:
<style type="text/css">
body {scrollbar-base-color:red;}
.scrollbarColor {scrollbar-base-color:blue;}
</style>
The first line in the style tells Internet Explorer to change the color of all of the scroll bars to red, including ones part of elements and the main scroll bar on the right side of the browser. The next line defines a class called "scrollbarColor" that, when called, changes the color of the scroll bar in an element to blue. You may use other colors. Any elements that call this class override the "body" style and use a blue scroll bar instead of a red one.
-
2
Insert the cursor within the "body" element of the file where you want to insert an element with scroll bars. Type the following:
<textarea cols="75" rows="5" class="scrollbarColor">
Some text.
Some text.
Some text.
</textarea>
This creates a "textarea" element that uses the scrollbarColor class. Even if the scroll bar is disabled, it appears blue.
-
-
3
Type the following:
<div style="height:70px; width:500px; overflow:scroll;" class="scrollbarColor">
Some text.<br/>
Some text.<br/>
Some text.
</div>
This creates a different kind of boxed area that uses both a vertical and horizontal scroll bar, both of which appear blue. If you do not include "overflow:scroll;" as part of the style when defining the element, the box will not create scroll bars. Instead, it dynamically resizes itself to fit any extra text.
-
4
Save the HTML file.
-
1
