CSS 사용자 지정 브라우저 스크롤바 스타일
4,314 0
오늘 憧憬 블로그에 방문했을 때, 그의 웹사이트의 브라우저 기본 사이드 스크롤바가 사용자 지정 스타일로 변경되어 있는 것을 발견했습니다. 이후 인터넷에서 검색해 보니, 해당 스타일은 CSS를 통해 디자인할 수 있다는 것을 알게 되었습니다. 그래서 직접 이것저것 시도해 보고, 겸사겸사 CSS 코드도 가져와서 이 사이트에 적용해 보았습니다. 효과는 직접 확인해 보시기 바랍니다.
주의:
해당 스타일은 구글 브라우저, QQ 브라우저, 360 브라우저 등 Chromium 엔진 기반의 브라우저에서만 적용됩니다. Firefox 브라우저, Opera 브라우저 등 Chromium 엔진 기반이 아닌 브라우저에서는 스타일이 표시되지 않습니다.
CSS 코드
속성 설명
::-webkit-scrollbar /* 滚动条整体部分 */
::-webkit-scrollbar-button /* 滚动条两端的按钮 */
::-webkit-scrollbar-track /* 外层轨道 */
::-webkit-scrollbar-track-piece /* 内层轨道滚动条中间部分 */
::-webkit-scrollbar-thumb /* 滚动条里面可以拖动的部分 */
::-webkit-scrollbar-corner /* 边角 */
::-webkit-resizer /* 定义右下角拖动块的样式 */
예제 코드
아래는 이 사이트에서 사용하는 CSS 스타일입니다. 필요에 따라 직접 수정할 수 있습니다.
CSS CSS
/* 滚动条默认显示样式 */
::-webkit-scrollbar-thumb {
background-color: #03a9f4;
height: 50px;
outline-offset: -2px;
outline: 2px solid #cddc39;
-webkit-border-radius: 4px;
border: 2px solid #fff;
}
/* 鼠标悬停滚动条样式 */
::-webkit-scrollbar-thumb:hover {
background-color: #00bcd4;
height: 50px;
-webkit-border-radius: 4px;
}
/* 滚动条宽度与高度 */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
/* 滚动框背景样式 */
::-webkit-scrollbar-track-piece {
background-color: #fff;
-webkit-border-radius: 0;
}
댓글
(0)아직 댓글이 없습니다