CSS로 스크롤 막대 화살표 스타일을 수정하는 방법

CSS에서는 "::-webkit-scrollbar" 의사 클래스 선택기를 통해 스크롤 막대 화살표 스타일을 설정할 수 있습니다. 구문은 "::-webkit-scrollbar-button{property:property value;}"입니다. 선택기를 설정할 수 있습니다. 스크롤 막대 트랙의 양쪽 끝에 있는 버튼을 클릭하면 작은 사각형의 위치를 ​​미세 조정할 수 있습니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

::-webkit-scrollbar CSS 의사 클래스 선택기는 요소의 스크롤 막대 스타일에 영향을 미칩니다. 이는 WebKit을 지원하는 브라우저(예: Google Chrome, Apple Safari)에서만 사용할 수 있습니다.

수정 가능한 스크롤 막대 CSS:

::-webkit-scrollbar — 整个滚动条.
::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).
::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
::-webkit-scrollbar-track — 滚动条轨道.
::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.
::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).

예: class="left-nav"인 div의 경우 스크롤 막대 화살표 스타일을 수정하세요

::-webkit-scrollbar-button {
    display: block; 
} 
::-webkit-scrollbar-button:horizontal:single-button:start {
    width: 24px;  
    background: url("../img/scroll_btn.png") 0 -52px no-repeat;
    cursor: pointer;
}
::-webkit-scrollbar-button:horizontal:single-button:end {
    width: 24px;    
    background: url("../img/scroll_btn.png") 0 -77px no-repeat;    
    cursor: pointer;
}
::-webkit-scrollbar-button:vertical:single-button:start {
    width: 16px;    
    background: url("../img/scroll_btn.png") -3px 0px no-repeat;    
    cursor: pointer;
}
::-webkit-scrollbar-button:vertical:single-button:end {
    width: 16px;    
    background: url("../img/scroll_btn.png") -3px -26px no-repeat;    
    cursor: pointer;
}

권장 학습: css 비디오 튜토리얼

위 내용은 CSS로 스크롤 막대 화살표 스타일을 수정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!