CSS를 사용하여 브라우저 스크롤 막대 스타일을 변경하는 방법

참고: 이 방법은 -webkit- 커널 브라우저에만 적용됩니다.

스크롤 막대의 모양은 두 부분으로 구성됩니다.

1 스크롤 막대의 전체 슬라이드 레일

2. 바 슬라이드 레일

CSS의 스크롤 막대는 3개의 부분으로 구성됩니다

name::-webkit-scrollbar //滚动条整体样式

name::-webkit-scrollbar-track //滚动条滑轨

name::-webkit-scrollbar-thumb //滚动条内部滑块

참고: 위의 3개는 의사 클래스이므로 이름을 변경해야 하는 요소의 이름으로 변경하세요

(관련 비디오 튜토리얼 권장 사항: css 비디오 튜토리얼)

예: 변경 전체 페이지 스크롤 막대 스타일

body::-webkit-scrollbar{ //先改变body的滚动条宽度

width: 8px;

}

body::-webkit-scrollbar-track{//再改变body的滚动条轨道颜色

background: rgb(200, 200, 200);

border-radius: 5px;

}

body::-webkit-scrollbar-thumb{//最后改变body的滚动条滑轨相关的样式

background: rgb(120, 120, 120);

border-radius: 5px;

}

은 배경, 투명도, 테두리, 둥근 모서리 및 기타 속성을 스타일에 추가하여 브라우저를 더욱 아름답게 만들 수 있습니다.

추천 튜토리얼: 빠른 시작 CSS

위 내용은 CSS를 사용하여 브라우저 스크롤 막대 스타일을 변경하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!