主页中的滚动条是粗细和颜色是否可调节？？？

<style type="text/css">
<!--
body { scrollbar-face-color: #459800;
scrollbar-shadow-color: #333333; 
scrollbar-highlight-color: #00ff00;
scrollbar-3dlight-color: #FF9FFF;
scrollbar-darkshadow-color: #7D3F7D;
scrollbar-track-color: #BE80FF;
scrollbar-arrow-color: #ff0000;}
//-->
</style>

解决方案 »

  1.   

    5.5支持;
    bodystyle.style.scrollbarBaseColor = 'pink';提供示例如下，可copy到本地HTML文件，运行：<!--TOOLBAR_START--><!--TOOLBAR_EXEMPT--><!--TOOLBAR_END-->
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE>scrollbarBaseColor Sample</TITLE>
    <META content="text/html; charset=windows-1252" http-equiv=Content-Type>
    <META content="MSHTML 5.00.2920.0" name=GENERATOR>
    <SCRIPT>
    function changeColor(oTheme){
    if (oTheme=="valentine"){
    bodystyle.style.scrollbarBaseColor = 'pink';
    displaybar.style.backgroundColor = 'red';
    oDiv.style.backgroundColor = 'pink';
    oTitle.style.color = 'red';
    oText.style.color = 'black';
    }
    if (oTheme=="stpats"){
    bodystyle.style.scrollbarBaseColor = 'limegreen';
    displaybar.style.backgroundColor = 'green';
    oDiv.style.backgroundColor = '#CCFFCC';
    oTitle.style.color = 'green';
    oText.style.color = 'black';
    }
    if (oTheme=="easter"){
    bodystyle.style.scrollbarBaseColor = 'limegreen';
    displaybar.style.backgroundColor = 'pink';
    oDiv.style.backgroundColor = '#FFFFCC';
    oTitle.style.color = '#3333CC';
    oText.style.color = 'black';
    }
    if (oTheme=="halloween"){
    bodystyle.style.scrollbarBaseColor = 'orange';
    displaybar.style.backgroundColor = 'orange';
    oDiv.style.backgroundColor = 'black';
    oTitle.style.color = 'orange';
    oText.style.color = 'white';
    }
    if (oTheme=="christmas"){
    bodystyle.style.scrollbarBaseColor = 'red';
    displaybar.style.backgroundColor = 'green';
    oDiv.style.backgroundColor = 'white';
    oTitle.style.color = 'red';
    oText.style.color = 'black';
    }
    if (oTheme=="earth"){
    bodystyle.style.scrollbarBaseColor = 'darkolivegreen';
    displaybar.style.backgroundColor = 'tan';
    oDiv.style.backgroundColor = 'bisque';
    oTitle.style.color = 'darkslategray';
    oText.style.color = 'black';
    }
    if (oTheme=="millennium"){
    bodystyle.style.scrollbarBaseColor = 'darkslateblue';
    displaybar.style.backgroundColor = 'cornflowerblue';
    oDiv.style.backgroundColor = '#99CCFF';
    oTitle.style.color = 'black';
    oText.style.color = 'black';
    }
    if (oTheme=="kids"){
    bodystyle.style.scrollbarBaseColor = 'orange';
    displaybar.style.backgroundColor = 'blue';
    oDiv.style.backgroundColor = 'greenyellow';
    oTitle.style.color = 'red';
    oText.style.color = 'black';
    }
    if (oTheme=="grays"){
    bodystyle.style.scrollbarBaseColor = '#666666';
    displaybar.style.backgroundColor = '#666666';
    oDiv.style.backgroundColor = '#cccccc';
    oTitle.style.color = 'black';
    oText.style.color = 'black';
    }
    }
    </SCRIPT><STYLE>
    BODY { BACKGROUND-COLOR: #336699; 
    MARGIN: 0px; scrollbar-base-color: #cccccc
    }
    .titletext { FONT-SIZE: 10pt; 
    FONT-WEIGHT: bold; MARGIN-BOTTOM: 2px
    }
    .titlebar { BACKGROUND: #336699; 
    BORDER-BOTTOM: #000000 1px solid; 
    BORDER-LEFT: #000000 1px solid; 
    BORDER-RIGHT: #000000 1px solid; 
    BORDER-TOP: #6699cc 1px solid; 
    COLOR: white; 
    FONT-FAMILY: verdana; 
    FONT-SIZE: 15pt; 
    FONT-WEIGHT: normal; 
    HEIGHT: 35px; 
    LEFT: 0px; 
    PADDING-BOTTOM: 5px; 
    PADDING-LEFT: 10px; 
    PADDING-RIGHT: 5px; 
    PADDING-TOP: 5px; 
    POSITION: relative; 
    TOP: 0px; 
    WIDTH: 600px
    }
    .displaybar { BACKGROUND: #333333; 
    COLOR: white; 
    FONT-FAMILY: verdana; 
    FONT-SIZE: 10pt; 
    FONT-WEIGHT: normal; 
    HEIGHT: 35px; 
    LEFT: 0px; 
    POSITION: relative; 
    TOP: 0px; 
    WIDTH: 600px
    }
    .displayretainer { TEXT-ALIGN: center; 
    WIDTH: 600px
    }
    .description { BACKGROUND: #ffffff; 
    COLOR: black; 
    FONT-FAMILY: verdana; 
    FONT-SIZE: 70%; 
    PADDING-BOTTOM: 5px; 
    PADDING-LEFT: 5px; 
    PADDING-RIGHT: 5px; 
    PADDING-TOP: 5px; 
    TEXT-ALIGN: left
    }
    .codebar { BACKGROUND: #ffffcc; 
    COLOR: black; 
    FONT-FAMILY: courier; 
    FONT-SIZE: 70%; 
    PADDING-BOTTOM: 5px; 
    PADDING-LEFT: 5px; 
    PADDING-RIGHT: 5px; 
    PADDING-TOP: 5px; 
    TEXT-ALIGN: left; 
    WIDTH: 600px
    }
    .bar { BACKGROUND: #336699; 
    BORDER-BOTTOM: #000000 1px solid; 
    BORDER-LEFT: #000000 1px solid; 
    BORDER-RIGHT: #000000 1px solid; 
    BORDER-TOP: #6699cc 1px solid; 
    COLOR: white; 
    FONT-FAMILY: verdana; 
    FONT-SIZE: 8pt; 
    FONT-WEIGHT: normal; 
    HEIGHT: 25px; 
    LEFT: 0px; 
    PADDING-BOTTOM: 5px; 
    PADDING-LEFT: 5px; 
    PADDING-RIGHT: 5px; 
    PADDING-TOP: 5px; 
    POSITION: relative; 
    TOP: 0px; 
    WIDTH: 600px
    }
    A:link { COLOR: white; 
    TEXT-DECORATION: none
    }
    A:visited { COLOR: white; 
    TEXT-DECORATION: none
    }
    A:active { COLOR: white; 
    TEXT-DECORATION: none
    }
    A:hover { COLOR: yellow; 
    TEXT-DECORATION: none
    }
    .barton { BACKGROUND: #6699cc; 
    BEHAVIOR: url(htc/reference.htc); 
    BORDER-BOTTOM: #000033 1px solid; 
    BORDER-LEFT: #99ccff 1px solid; 
    BORDER-RIGHT: #000033 1px solid; 
    BORDER-TOP: #99ccff 1px solid; 
    COLOR: white; 
    FONT-FAMILY: verdana; 
    FONT-SIZE: 8pt; 
    FONT-WEIGHT: bold; 
    HEIGHT: 10px; 
    MARGIN-LEFT: 4px; 
    MARGIN-RIGHT: 4px; 
    PADDING-BOTTOM: 2px; 
    PADDING-LEFT: 8px; 
    PADDING-RIGHT: 8px; 
    TEXT-ALIGN: left
    }
    .bartonover { BACKGROUND: gray; 
    BEHAVIOR: url(htc/reference.htc); 
    BORDER-BOTTOM: black 1px solid; 
    BORDER-LEFT: #cccccc 1px solid; 
    BORDER-RIGHT: black 1px solid; 
    BORDER-TOP: #cccccc 1px solid; 
    COLOR: white; 
    FONT-FAMILY: verdana; 
    FONT-SIZE: 8pt; 
    FONT-WEIGHT: bold; 
    HEIGHT: 10px; 
    MARGIN-LEFT: 4px; 
    MARGIN-RIGHT: 4px; 
    PADDING-BOTTOM: 2px; 
    PADDING-LEFT: 8px; 
    PADDING-RIGHT: 8px; 
    TEXT-ALIGN: left
    }
    TR { BACKGROUND-COLOR: lightgrey
    }
    TABLE { BORDER-BOTTOM: gray 2px solid; 
    BORDER-LEFT: white 2px solid; 
    BORDER-RIGHT: gray 2px solid; 
    BORDER-TOP: white 2px solid; 
    MARGIN: 10px; 
    WIDTH: 85%
    }
    TD { COLOR: black; 
    FONT-FAMILY: arial; 
    FONT-SIZE: 11px; 
    FONT-WEIGHT: bold; 
    TEXT-ALIGN: left; 
    TEXT-INDENT: 2px; 
    WIDTH: 25%
    }
    INPUT { WIDTH: 100%
    }
    SELECT {WIDTH: 100%
    }
    .box1 { BACKGROUND-COLOR: white; 
    BORDER-BOTTOM: black 1px solid; 
    BORDER-LEFT: black 1px solid; 
    BORDER-RIGHT: black 1px solid; 
    BORDER-TOP: black 1px solid; 
    HEIGHT: 220px; 
    LEFT: 20px; 
    OVERFLOW: scroll; 
    PADDING-BOTTOM: 15px; 
    PADDING-LEFT: 15px; 
    PADDING-RIGHT: 15px; 
    PADDING-TOP: 15px; 
    POSITION: absolute; 
    TOP: 25px; 
    WIDTH: 550px; 
    Z-INDEX: 3
    }
    .bodycopy { COLOR: black; 
    FONT-FAMILY: verdana; 
    FONT-SIZE: 8pt; 
    FONT-WEIGHT: normal; 
    TEXT-ALIGN: left
    }
    .titler { COLOR: black; 
    FONT-FAMILY: Verdana; 
    FONT-SIZE: 16pt; 
    FONT-WEIGHT: bold; 
    TEXT-ALIGN: left
    }
    .contshad { BACKGROUND: black; 
    FILTER: progid:DXImageTransform.Microsoft.CrBlur(PixelRadius=3,MakeShadow=true,ShadowOpacity=.30);
     HEIGHT: 220px; 
     LEFT: 22px; 
     POSITION: absolute; 
     TOP: 27px; 
     WIDTH: 550px; 
     Z-INDEX: 2
    }
    </STYLE></HEAD>
    <BODY id=bodystyle scroll=no>
    <DIV class=titlebar>Customizable Scroll Bar Colors</DIV>
    <DIV class=bar style="WIDTH: 600px">Choose from preset themes in the dropdown list below to change the styles in the preview window.
    <BR>
    <BR>
    <TABLE border=1 borderColorDark=lightgrey borderColorLight=lightgrey 
    cellPadding=0 cellSpacing=0 style="WIDTH: 550px">
      <TBODY>
      <TR>
        <TD align=left><LABEL for=dType>Choose a color theme:</LABEL></TD></TR>
      <TR>
        <TD style="WIDTH: 200px">
    <SELECT id=dType name=oType 
          onchange="var val = this.options[this.selectedIndex].value; if (val!='') {changeColor(val)}"> 
            <OPTION selected value="">Select a theme...</OPTION> 
    <OPTION value=valentine>Valentine Pink</OPTION>
    <OPTION value=stpats>St. Patrick Green</OPTION>
    <OPTION value=easter>Easter Pastels</OPTION>
    <OPTION value=halloween>Halloween Orange</OPTION>
    <OPTION value=christmas>Christmas Green and Red</OPTION>
    <OPTION value=earth>Earth Tones</OPTION> <OPTION value=millennium>Millennium 
            Blues</OPTION> <OPTION value=kids>For Kids</OPTION> <OPTION 
            value=grays>Gray Scale</OPTION></SELECT></TD>
    </TR></TBODY></TABLE></DIV>
    <DIV class=bar>
    <DIV class=titletext>Preview Window:</DIV></DIV>
    <DIV class=displaybar id=displaybar style="HEIGHT: 277px">
    <DIV class=displayretainer>
    <DIV class=contshad id=shadowbox></DIV>
    <DIV class=box1 id=oDiv>
    <DIV class=titler id=oTitle>Colored Scroll Bars</DIV>
    <DIV class=bodycopy id=oText>
    <BR>
    As of Microsoft&reg; Internet Explorer 5.5, DHTML documents are no longer restricted to the Microsoft&reg; Windows operating system's standard gray scrollbars. You can now specify scroll bar colors using style sheets. 
    <BR>
    <BR>
    You can use this feature to create coordinated themes for your documents, with scroll bar colors that match the rest of the document.
    <BR>
    <BR>
    As of Microsoft&reg; Internet Explorer 5.5, DHTML documents are 
    no longer restricted to the Microsoft&reg; Windows operating system's standard gray scrollbars. 
    You can now specify scroll bar colors using style sheets. 
    <BR>
    <BR>
    You can use this feature to create coordinated themes for your documents, with scroll bar colors that match the rest of the document.
    <BR>
    <BR>
    </DIV>
    </DIV>
    </DIV>
    </DIV>
    <DIV class=bar><A href="http://www.microsoft.com/misc/cpyright.htm" 
    target=_top>?000 Microsoft Corporation. All rights reserved. Terms of 
    use</A>.</DIV>
    </BODY>
    </HTML>