À propos de CSS : scrollbar-face-color ne prend en charge que les solutions ie

Aujourd'hui, quelqu'un m'a soudainement demandé comment personnaliser le CSS de la barre de défilement. J'ai découvert que scrollbar-base-color n'est pris en charge que par IE. J'ai vérifié les informations pendant longtemps et je les ai résumées comme suit ! ! !

Style de barre de défilement personnalisé dans le navigateur IE  :

HTML {   
scrollbar-base-color: #C0C0C0;   
scrollbar-base-color: #C0C0C0;   
scrollbar-3dlight-color: #C0C0C0;   
scrollbar-highlight-color: #C0C0C0;   
scrollbar-track-color: #EBEBEB;   
scrollbar-arrow-color: black;   
scrollbar-shadow-color: #C0C0C0;   
scrollbar-dark-shadow-color: #C0C0C0;   
}

Explication :
Introduire le contenu de la feuille de style impliquant la barre de défilement du navigateur (certains Le style nécessite ie5.5+ pour prendre en charge) :
1. Paramètres lorsque le contenu déborde (définissant si l'objet défini affiche les barres de défilement)
overflow-x Paramètres lorsque le contenu déborde dans la direction horizontale
overflow-yParamètres verticaux lorsque le contenu directionnel déborde
Les valeurs définies pour les trois attributs ci-dessus sont visible (valeur par défaut), défilement, masqué et auto.

2． scrollbar-3d-light-color La couleur du bord lumineux de la barre de défilement tridimensionnelle (définissez la couleur de la barre de défilement)
scrollbar-arrow-color La couleur des flèches triangulaires sur les boutons haut et bas
scrollbar-base-color La couleur de base de la barre de défilement
scrollbar-dark-shadow-color La couleur de l'ombre forte de la barre de défilement tridimensionnelle
scrollbar-face-color La couleur de la partie saillante partie de la barre de défilement tridimensionnelle
scrollbar-highlight-color La couleur de la partie vide de la barre de défilement
scrollbar -shadow-color La couleur de l'ombre de la barre de défilement tridimensionnelle

Style de barre de défilement personnalisé dans le navigateur CHROME :

::-webkit-scrollbar { width: 3px; height: 3px;}   
::-webkit-scrollbar-track-piece { background-color: #ffffff;}   
::-webkit-scrollbar-thumb{height: 50px; background-color: #666; -webkit-border-radius: 3px;}

Explication :

::-webkit-scrollbar 滚动条宽跟高 
::-webkit-scrollbar-track-piece 滚动条样式底部内层样式 
::-webkit-scrollbar-thumb 滚动条滑块样式 
-webkit-border-radius: 滚动条滑块边角–导圆角

Personnalisé sous FireFox Barre de défilement :

/* 滚动条颜色 */  
scrollbar {   
   -moz-appearance: none !important;   
   background: rgb(0,255,0) !important;   
}   
/* 滚动条按钮颜色 */  
thumb,scrollbarbutton {   
   -moz-appearance: none !important;   
   background-color: rgb(0,0,255) !important;   
}   
/* 鼠标悬停时按钮颜色 */  
  
thumb:hover,scrollbarbutton:hover {   
   -moz-appearance: none !important;   
   background-color: rgb(255,0,0) !important;   
}   
/* 隐藏上下箭头 */  
scrollbarbutton {   
   display: none !important;   
}   
/* 纵向滚动条宽度 */  
scrollbar[orient="vertical"] {   
  min-width: 15px !important;   
}   
}

Utilisez JS pour implémenter une barre de défilement personnalisée sous FF :

JS

<script type=“text/javascript” src=“JQUERY-1.1.3.1.js”></script>    
<script type=“text/javascript” src=“jquery.linscroll.js“></script>    
<script type=“text/javascript”>    
$(document).ready(    
function(){    
$(’#scrollContent’).setScroll( //scrollContent为滚动层的ID 
{img:scroll_bk.gif’,width:10},//背景图及其宽度    
{img:scroll_arrow_up.gif’,height:3},//up image    
{img:scroll_arrow_down.gif’,height:3},//down image    
{img:scroll_bar.gif’,height:25}//bar image    
);});      
</script>  
HTML 
<div id=“scrollContent” style=“width:140px;overflow:hidden;height:170px;”>内容</div>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!