.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
Sign In
Win Surprise Gifts!!!

Top 5 Contributors of the Month

Home >> Articles >> ASP.NET >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Transparent or Hide Scrollbar

Posted By:Meetu Choudhary       Posted Date: June 08, 2009    Points: 25    Category: ASP.NET    URL: http://www.dotnetspark.com  

Transparent or Hide Scrollbar

Sometimes when < body style="overflow: hidden" > property doesnt workswith 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

makes 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

Thanks and Regards
Meetu Choudhary
 Subscribe to Articles


Further Readings:


No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend