Scrollbar: Transparent or Hideen

Transparent or Hide Scrollbar

Sometimes when <body style="overflow: hidden" > property doesnt works with some broswers then we have the alternative that we must hide it by making it transpernt or coloring it as the page is.

To create a transparent scrollbar or hide it from view, What we need is to work with the css properties of the scrollbar. for our assistance I am here mentionning the cascading style sheet properties.

Note: These properties are recognized by Internet Explorer (5.5 and above) and are ignored by FireFox, Opera and Netscape.

scrollbar-track-color: Sets the color for scroll bar track

scrollbar-face-color: Sets the color for the scroll bar slider

scrollbar-arrow-color: Sets the scroll bar arrow color

scrollbar-3dlight-color: Sets the scroll bar 3D light color

scrollbar-highlight-color: Sets the scroll bar highlight color

scrollbar-shadow-color: Sets the scroll bar shadow color

scrollbar-darkshadow-color: Sets the scroll bar dark shadow color

When does a web page display a scrollbar?

When the content overflows the display area on a browser a web page displays a scrollbar. The controll of the display area on a web browser is monitored and ruled by several factors some of them are the screen resolution, installed toolbars, browser configuration (text size, display of large or small icons), view/hide status bar etc. If the page is long, the browser displays a scrollbar on the right and if the width of the page set at a higher value then the horizontal scrollbar will be added in the browser window.

Sometimes when the page content is less than the display area in a browser. Different Browsers behave differently if the page fits in the display area. Internet Explorer displays a "grayed" scrollbar while Netscape and Mozilla do not show a scrollbar. Even if the page content fits nicely in the display area, IE will show a scrollbar. which we may not want to display or just we want to hide it from the user we have to set the following style properties you may add this in the head section of the page or may use it in external stylesheet to make the scrollbar transparent.

considering that the page background color is white

html {

background-color: #FFFFFF;

scrollbar-shadow-color: #FFFFFF;

scrollbar-highlight-color: #FFFFFF;

scrollbar-face-color: #FFFFFF;

scrollbar-3dlight-color: #FFFFFF;

scrollbar-darkshadow-color: #FFFFFF;

scrollbar-track-color: #FFFFFF;

scrollbar-arrow-color: #FFFFFF;

}

Note:-- Basically we are setting the color of the scroll bar as the page to give it a feel of transprancy but it will be there