Transparent or hide scrollbar

Transparent or hide scrollbar cover image
  1. Home
  2. HTML
  3. Transparent or hide scrollbar

To create a transparent scrollbar or hide it from view, we need to work with the css properties governing scrollbar colors that we learnt on the another page Scrollbar colors – Changing the scrollbar using HTML color codes.

Here are the cascading style sheet properties once again. Note: These properties are recognized by Internet Explorer (5.5 and above) and are ignored by FireFox, Opera and Netscape.

Sponsored Links

When does a web page display a scrollbar?

A web page displays a scrollbar when the content overflows the display area on a browser. The display area on a web browser is controlled by several factors such as the screen resolution, installed toolbars, browser configuration (display of large or small icons), view/hide status bar etc. Thus, if the page is long, the browser displays a scrollbar on the right (on LTR directional languages) and if the width of the page has been set at a higher value a horizontal scrollbar will be added in the browser window.
What if the page content is less than the display area in a browser?
Browsers behave differently if the page fits in the display area. For example, Internet Explorer displays a “grayed” scrollbar while Netscape and Mozilla do not show a scrollbar. The following images will make this clear. The images are of browsers whose windows have been maximized on a screen resolution of 800×600 pixels.

Grayed scrollbar in Internet Explorer - Transparent or Hidden scrollbars

Note how Internet Explorer displays a “grayed” scrollbar even if the page content fits in the browser display area.

Grayed scrollbar in Netscape Navigator - Transparent or Hidden scrollbars

Netscape Navigator on the other hand displays no scrollbar in the window if the web page content fits nicely in the browser display area.

Thus, even though the page content fits nicely in the browser display area, Internet Explorer will show a scrollbar. How do we make this scrollbar transparent or hide it from view?
We simply set all css properties to the value of the background color of the web page! Here is a web page with a light green background (#CEE7A3). You will notice that there is no scrollbar – not even a grayed one in Internet Explorer. We have set all scrollbar CSS properties to the light green background color (#CEE7A3). This displays all components of the scrollbar in the same color as the background and thus, hides or makes the scrollbar transparent.

html {background-color: #CEE7A3; 
scrollbar-shadow-color: #CEE7A3;
scrollbar-highlight-color: #CEE7A3;
scrollbar-face-color: #CEE7A3;
scrollbar-3dlight-color: #CEE7A3;
scrollbar-darkshadow-color: #CEE7A3;
scrollbar-track-color: #CEE7A3;
scrollbar-arrow-color: #CEE7A3;}

Things to remember
If the page is short in height so that the entire page contents are shown in the browser display area, Internet Explorer will still present a scrollbar – though grayed out. To hide it or make it transparent, we use the CSS scrollbar rules and set all of them to the value of the web page background color.
Other popular browsers such as Firefox and Netscape will not show scrollbars for a short page but if the page is long, you cannot prevent these browsers from providing the vertical scrollbar.

HTML