CSS 정보: scrollbar-face-color는 즉 솔루션만 지원합니다.

오늘 갑자기 스크롤바 CSS를 어떻게 커스터마이즈하는지 물어보시는데, 스크롤바 기본 색상은 IE에서만 지원된다는 것을 알게 되었어요. 오랫동안 정보를 확인해보니 다음과 같이 요약했어요! ! !

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;   
}

설명:
브라우저 스크롤 막대와 관련된 스타일 시트의 콘텐츠 소개(일부 스타일을 지원하려면 ie5.5 이상이 필요함):
1. 콘텐츠가 오버플로될 때의 오버플로 설정(설정된 개체가 스크롤 막대를 표시할지 여부 설정)
overflow-x가로 콘텐츠가 오버플로될 때의 설정
overflow-y세로 콘텐츠가 오버플로될 때의 설정
위 세 가지 속성에 대한 설정 값이 표시됩니다. (기본값), 스크롤, 숨김, 자동.

2. scrollbar-3d-light-color 3차원 스크롤 막대의 밝은 가장자리 색상(스크롤 막대의 색상 설정)
scrollbar-arrow-color 위쪽 및 아래쪽 버튼의 삼각형 화살표 색상
scrollbar- base-color 스크롤바의 기본 색상
scrollbar-dark-shadow-color 3차원 스크롤바의 강한 그림자 색상
scrollbar-face-color 3차원 스크롤바 돌출부분의 색상
scrollbar-highlight-color 스크롤 막대의 빈 부분 색상
scrollbar-shadow-color 3차원 스크롤 막대의 그림자 색상

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;}

설명:

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

FireFox의 사용자 정의 스크롤 막대:

/* 滚动条颜色 */  
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;   
}   
}

JS를 사용하여 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>

위 내용은 CSS 정보: scrollbar-face-color는 즉 솔루션만 지원합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!