[CSS] 브라우져 스크롤바 스타일 변경 (크롬, 사파리)

크롬, 사파리 등의 웹킷 엔진에서 변경할 경우 방법
먼저 크롬, 사파리 계열의 웹켓엔진입니다. 아래처럼 여러가지 CSS 스타일 속성을 사용 할 수 있습니다.

::-webkit-scrollbar
::-webkit-scrollbar-button
::-webkit-scrollbar-button:start
::-webkit-scrollbar-button:end
::-webkit-scrollbar-button:vertical:increment
::-webkit-scrollbar-button:vertical:decrement
::-webkit-scrollbar-track
::-webkit-scrollbar-track-piece
::-webkit-scrollbar-thumb
::-webkit-scrollbar-corner
::-webkit-resizer

 

! ::-webkit-scrollbar-track 또는 ::-webkit-scrollbar-thumb width 설정하는 방법
만약 스크롤바의 트랙(track)과 버튼(thumb) 사이즈가 동일하게 변경하는 경우 width 값만 변경해 적용할 수 있습니다.

스크롤바 영역인 트랙(track)만 더 작게 하고 싶다면 width 값만 사용하는 것이 아니라 border 스타일을 변경해 적용할 수 있습니다. 

::-webkit-scrollbar-track에 background와 border를 사용하여 조절하는 방법
예를들어 track을 더 작게 보일 수 있도록 border-left 또는 border-right 색을 transparent으로 지정합니다. 이렇게 하면 더 얇고 작은 크기의 트랙 스타일을 만들 수 있습니다. 투명하게 적용 후 background-clip: content-box 또는 padding-box로 설정합니다.

::-webkit-scrollbar-track {
    width: 10px;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    background-color: red;
    background-clip: content-box;
}

 

 

! 스크롤바 버튼의 화살표 이미지 바꾸기 스크롤바의 버튼을 이미지로 바꿀 수 있습니다. 이 경우 아래처럼 이미지 파일을 적용합니다.
@ 상하 방향 스크롤바의 화살표 바꾸기

::-webkit-scrollbar-button:vertical:increment {
    background: url(arrow_down.png) no-repeat center 50%;
}
::-webkit-scrollbar-button:vertical:decrement {
    background: url(arrow_up.png) no-repeat center 50%;
}

 

@ 좌우방향 스크롤바 바꾸기

::-webkit-scrollbar-button:horizontal:increment {
    background: url(arrow_down.png) no-repeat center 50%;
}
::-webkit-scrollbar-button:horizontal:decrement {
    background: url(arrow_up.png) no-repeat center 50%;
}

 

index_no5.html

0.00MB