How to change the color and position of the scrollbar?
Some newer browsers version allow you to change the scrollbar by
color and position. Most of this is supported by the IE browser only.
These are the following types of changing color of different
position of the scrollbar.
- Face
- Shadow
- Highlight
- 3dlight
- Darkshadow
- Track
- Arrow
You can use any color and position according to your site design.
For example: If you want to change Face color of scrollbar then write
the code something as:
obj.scrollbarFaceColor
= htmlStyle.scrollbarFaceColor ='#f00000';
Example:
<html>
<head >
<title>Scrollbar coloring</title>
</head>
<body bgcolor="#ccccff">
<script type="text/javascript">
window.onload = function()
{
var htmlStyle = document.getElementsByTagName('html')[0].style;
var x = document.body.style;
x.scrollbarShadowColor = htmlStyle.scrollbarShadowColor = '#f00000';
//x.scrollbarFaceColor = htmlStyle.scrollbarFaceColor
='#f00000';
//x.scrollbarArrowColor =
htmlStyle.scrollbarArrowColor = '#f00000';
//x.scrollbarTrackColor =
htmlStyle.scrollbarTrackColor = '#ff00ff';
//x.scrollbarHighlightColor =
htmlStyle.scrollbarHighlightColor = '#f00000';
//x.scrollbar3dlightColor = htmlStyle.scrollbar3dlightColor
= '#ff00ff';
//x.scrollbarDarkshadowColor =
htmlStyle.scrollbarDarkshadowColor = '#ff00ff';
}
</script>
<form id="form1" runat="server"
>
<font color="fuchsia"><h2>This is
Shadow color Scrollbar</h2></font>
<font color="red"><b>There are
different position of Scrollbar</b></font>
<br /><br />
<font color="navy">
Normal
Face<br />
Shadow<br />
Highlight<br />
3dlight<br />
Darkshadow<br />
Track<br />
Arrow<br /></font>
</form>
</body>
</html>
Output:
Figure 1: Scrollbar with changed shadow color.
If you want to change Face color of the scrollbar then write the
code something like this:
x.scrollbarFaceColor
= htmlStyle.scrollbarFaceColor ='#f00000';
Figure 2: Scrollbar with changed Face color.
If you want to change Track color of the scrollbar then the
code will be:
x.scrollbarTrackColor
= htmlStyle.scrollbarTrackColor = '#ff00ff';
Figure 3: Scrollbar with changed Track color.
If you want to change Arrow color of the scrollbar then write the
code something as:
x.scrollbarArrowColor
= htmlStyle.scrollbarArrowColor = '#f00000';
Figure 4: Scrollbar with changed Arrow color.
No comments:
Post a Comment