Home > Article > Web Front-end > Detailed explanation of setting the scroll bar color of CSS example scrollbar

Detailed explanation of setting the scroll bar color of CSS example scrollbar

黄舟Original: 2017-07-03 11:23:502372browse

Positive CSS example---scrollbar scroll bar color setting

<body style="scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon">
*********************
<STYLE>{
SCROLLBAR-FACE-COLOR:#3399cc; 
SCROLLBAR-HIGHLIGHT-COLOR: white; 
SCROLLBAR-SHADOW-COLOR: white; 
SCROLLBAR-ARROW-COLOR: #ffffff; 
SCROLLBAR-BASE-COLOR:#dff0c0}
</STYLE>

Among them SCROLLBAR-FACE-COLOR, SCROLLBAR-HIGHLIGHT-COLOR, SCROLLBAR-SHADOW-COLOR, SCROLLBAR-ARROW-COLOR, SCROLLBAR -BASE-COLOR and SCROLLBAR-DARKSHADOW-COLOR are used to specify the colors of different parts of the scroll bar (you will know what parts of the scroll bar they represent based on their meaning).
Just add these lines of code between the HTML codes of the page! ! ! !
：)

##****************************** *******************

The scroll bar is the vertical (horizontal) bar on the right side (bottom) of the web page. The color of the scroll bar can be changed by writing a CSS style sheet. This page uses green scroll bars.

Scroll bar CSS style sheet:

 <style>
BODY {
   scrollbar-face-color: #008000;
   scrollbar-highlight-color: #0B0E2F;
   scrollbar-3dlight-color: #0B0E2F;
   scrollbar-darkshadow-color: #0B0E2F;
   scrollbar-shadow-color: #003366;
   scrollbar-arrow-color: #003366;
   scrollbar-track-color: #FFFFFF;}
</style>

The role of the CSS style sheet is to control the website Font style, color style, mouse style
starts with c9ccee2e6ea535a969eb3f532ad9fe89 and ends with 531ac245ce3e4fe3d50054a55f265927.

The green code
scrollbar-face-color: #008000;--The color of the scroll bar bar scrollbar-highlight-color: #0B0E2F;--Color of scroll bar highlight
scrollbar-3dlight-color: #0B0E2F;--Color of scroll bar 3D
scrollbar-darkshadow-color: #0B0E2F;--Color of scroll bar dark shadow
scrollbar-shadow-color: #003366;--The color of the scroll bar shadow
scrollbar-arrow-color: #003366;--The color of the scroll bar arrow
scrollbar-track-color: #FFFFFF;} --The color of the scroll bar background

????
????
"
#008000" is The three primary color codes of colors can be adjusted and replaced by different colors at will.

****************************************** *******************************

<STYLE>  
BODY  {  
SCROLLBAR-FACE-COLOR:  #fc0000;  
 SCROLLBAR-HIGHLIGHT-COLOR:  #fc0000;  
 SCROLLBAR-SHADOW-COLOR:  #fc0000;  
 SCROLLBAR-3DLIGHT-COLOR:  #fc0000;  
 SCROLLBAR-ARROW-COLOR:  #fcfc00;  
 SCROLLBAR-TRACK-COLOR:  #fc4800;  
 SCROLLBAR-DARKSHADOW-COLOR:  #fc0000;  
 SCROLLBAR-BASE-COLOR:  #fc0000  
}  
</STYLE>

******************************************* ************************

body {
font-size:9pt;
color:#000099; cursor:url(meng.cur);
OVERFLOW-X
: auto; OVERFLOW: scroll;
SCROLLBAR-FACE-COLOR: #817af3;
SCROLLBAR-HIGHLIGHT-COLOR: #817af3;
SCROLLBAR-SHADOW-COLOR: #000000;
SCROLLBAR-3DLIGHT-COLOR: #817af3;
SCROLLBAR-ARROW-COLOR: #e8f7e6;
SCROLLBAR-TRACK-COLOR: 817af3
SCROLLBAR-DARKSHADOW-COLOR: #e8f7e6;
}

332 Split screen scroll bar color setting

Delete all other scroll bar codes and only add the following code. Each corresponding color is explained.

 set
Time
out(function setScrollbar(){      //color=Array
(面部颜色,上左斜面,下右斜面,上左边沿,箭头,底版色,下右边沿)      
color=Array("#EDE6DA","#EDE6DA","#EDE6DA","#EDE6DA","#84674A","#EDE6DA","#EDE6DA");      
box=Array("u","u1","d","r")
      for (var i=0;i<box.length;i++){            
eval("parent."+box[i]+".
document
.body.style.scrollbarFaceColor=color[0]");            
eval("parent."+box[i]+".document.body.style.scrollbarHighlightColor=color[1]");            
eval("parent."+box[i]+".document.body.style.scrollbarShadowColor=color[2]");
            eval("parent."+box[i]+".document.body.style.scrollbar3dLightColor=color[3]");            
eval("parent."+box[i]+".document.body.style.scrollbarArrowColor=color[4]");            
eval("parent."+box[i]+".document.body.style.scrollbarTrackColor=color[5]");
            eval("parent."+box[i]+".document.body.style.scrollbarDarkShadowColor=color[6]");      
};
setTimeout("setScrollbar()",300); 
},300);

The above is the detailed content of Detailed explanation of setting the scroll bar color of CSS example scrollbar. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Regarding DIV scroll bar Firefox compatibility, please ask for js module scrollbar-dark-shadow-color:#eee;Next article：Regarding DIV scroll bar Firefox compatibility, please ask for js module scrollbar-dark-shadow-color:#eee;

See more

Detailed explanation of setting the scroll bar color of CSS example scrollbar

Related articles