참고: 이 방법은 -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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
