webkit-scollbar
Wekit 브라우저 스크롤바 선택자
<div class="container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    In sagittis purus sit amet felis aliquam, at aliquam odio consequat.
    Morbi id faucibus turpis. Aenean risus mi,
    euismod vitae pulvinar vitae, ultricies vel dolor.
    Vivamus ac condimentum urna, sed condimentum orci.
    Mauris sed elit in lectus iaculis elementum id eget ante.
    Maecenas vulputate feugiat arcu, eu accumsan nisl pharetra eget.
    Vestibulum bibendum vehicula risus sed elementum.
    Duis porttitor sapien ut justo ultrices, vitae sollicitudin arcu lacinia.
    Aliquam volutpat elit non dui luctus efficitur.
</div>
.container {
    padding: 0 0.5em;
    max-width: 360px;
    height: 150px;
    overflow: auto;
}
.container::-webkit-scrollbar {
    width: 10px;
}
.container::-webkit-scrollbar-track {
    background-color: gray;
}
.container::-webkit-scrollbar-thumb { 
    background-color: skyblue;
}
.container::-webkit-scrollbar-button {
    display: none;
}
실제 적용 모습 스크롤바를 드래그해 보세요.
.container {
    padding: 0 0.5em;
    max-width: 360px;
    height: 150px;
    overflow: auto;
}
.container::-webkit-scrollbar {
    width: 10px;
}
.container::-webkit-scrollbar-track { 
    background-color: gray;
}
.container::-webkit-scrollbar-thumb { 
    background-color: skyblue;
}
.container::-webkit-scrollbar-button {
    display: none;
}

/* hover 효과 */
.container::-webkit-scrollbar-thumb:hover {
    background-color: blue;
    transition: all 0.2s; /* 작동 안 됨 */
}
실제 적용 모습 스크롤바를 드래그해 보세요.
.container {
    padding: 0 0.5em;
    max-width: 360px;
    height: 150px;
    overflow: auto;
}
.container::-webkit-scrollbar {
    width: 10px;
}
.container::-webkit-scrollbar-track { 
    background-color: gray;
}
.container::-webkit-scrollbar-thumb { 
    background-color: skyblue;
}
.container::-webkit-scrollbar-button {
    display: none;
}

/* hover 효과 */
.container::-webkit-scrollbar-thumb:hover {
    background-color: blue;
    transition: all 0.2s; /* 작동 안 됨 */
}

/* 코너에 라운드 효과 */
.container::-webkit-scrollbar-track,
.container::-webkit-scrollbar-thumb {
    border-radius: 5px;
}
실제 적용 모습
.container {
    padding: 0 0.5em;
    max-width: 360px;
    height: 150px;
    overflow: auto;
}

/*
.container::-webkit-scrollbar {
    width: 10px;
}
*/

.container::-webkit-scrollbar-track {
    background-color: gray;
}
.container::-webkit-scrollbar-thumb { 
    background-color: skyblue;
}
.container::-webkit-scrollbar-button {
    display: none;
}
실제 적용 모습 스크롤바의 커스텀 CSS 스타일링이 적용되지 않았습니다.
.container {
    padding: 0 0.5em;
    max-width: 360px;
    height: 150px;
    overflow: auto;
}
.container::-webkit-scrollbar {
    display: none;
}
실제 적용 모습 마우스를 올려 놓고 마우스 휠로 스크롤링 해보세요.
selector {
    scollbar-color: gray darkgray;
    scollbar-width: thin;
}
CSS Scrollbars 속성
CSS Scrollbars 속성
selector {
    scrollbar-color: auto || [ <thumb color> <track color> ]
}
<div class="container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    In sagittis purus sit amet felis aliquam, at aliquam odio consequat.
    Morbi id faucibus turpis. Aenean risus mi,
    euismod vitae pulvinar vitae, ultricies vel dolor.
    Vivamus ac condimentum urna, sed condimentum orci.
    Mauris sed elit in lectus iaculis elementum id eget ante.
    Maecenas vulputate feugiat arcu, eu accumsan nisl pharetra eget.
    Vestibulum bibendum vehicula risus sed elementum.
    Duis porttitor sapien ut justo ultrices, vitae sollicitudin arcu lacinia.
    Aliquam volutpat elit non dui luctus efficitur.
</div>
.container {
    padding: 0 0.5em;
    max-width: 360px;
    height: 150px;
    overflow: auto;
    scrollbar-color: skyblue gray;
}
실제 적용 모습 파이어폭스 브라우저에서만 적용됩니다.
scrollbar-color 속성 캡쳐화면
scrollbar-color 속성 캡쳐화면
selector {
    scrollbar-width: auto | thin | none;
}
<div class="container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    In sagittis purus sit amet felis aliquam, at aliquam odio consequat.
    Morbi id faucibus turpis. Aenean risus mi,
    euismod vitae pulvinar vitae, ultricies vel dolor.
    Vivamus ac condimentum urna, sed condimentum orci.
    Mauris sed elit in lectus iaculis elementum id eget ante.
    Maecenas vulputate feugiat arcu, eu accumsan nisl pharetra eget.
    Vestibulum bibendum vehicula risus sed elementum.
    Duis porttitor sapien ut justo ultrices, vitae sollicitudin arcu lacinia.
    Aliquam volutpat elit non dui luctus efficitur.
</div>
.container {
    padding: 0 0.5em;
    max-width: 360px;
    height: 150px;
    overflow: auto;
    scrollbar-width: thin;
}
실제 적용 모습 파이어폭스 브라우저에서만 적용됩니다.
scrollbar-width 속성 캡쳐화면
scrollbar-width 속성 캡쳐화면
selector {
    scrollbar-width: none;
}
<div class="container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    In sagittis purus sit amet felis aliquam, at aliquam odio consequat.
    Morbi id faucibus turpis. Aenean risus mi,
    euismod vitae pulvinar vitae, ultricies vel dolor.
    Vivamus ac condimentum urna, sed condimentum orci.
    Mauris sed elit in lectus iaculis elementum id eget ante.
    Maecenas vulputate feugiat arcu, eu accumsan nisl pharetra eget.
    Vestibulum bibendum vehicula risus sed elementum.
    Duis porttitor sapien ut justo ultrices, vitae sollicitudin arcu lacinia.
    Aliquam volutpat elit non dui luctus efficitur.
</div>
.container {
    padding: 0 0.5em;
    max-width: 360px;
    height: 150px;
    overflow: auto;
    scrollbar-color: skyblue gray;
    scrollbar-width: thin;
}
실제 적용 모습 파이어폭스 브라우저에서만 적용됩니다.
scrollbars
Scrollbars 속성 캡쳐화면
.container {
    padding: 0 0.5em;
    max-width: 360px;
    height: 150px;
    overflow: auto;
    scrollbar-width: none; /* 파이어폭스 스크롤바 숨기기 */
}
.container::-webkit-scrollbar {
    display: none; /* Webkit 계열 스크롤바 숨기기 */
}
.container {
    padding: 0 0.5em;
    max-width: 360px;
    height: 150px;
    overflow: auto;

     /* 파이어폭스 스크롤바*/
    scrollbar-color: skyblue gray;
    scrollbar-width: thin;
}

/* Webkit 계열 스크롤바 */
.container::-webkit-scrollbar {
    width: 10px;
}
.container::-webkit-scrollbar-track {
    background-color: gray;
}
.container::-webkit-scrollbar-thumb { 
    background-color: skyblue;
}
.container::-webkit-scrollbar-button {
    display: none;
}

마지막 업데이트 정보: 2023-12-14

스크롤바(Scrollbars) 커스텀 스타일링에 대한 데스크탑 브라우저 호환성
데스크탑
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
::-webkit-scrollbar 2 79 지원하지 않음 4
::-webkit-scrollbar-track 2 79 지원하지 않음 4
::-webkit-scrollbar-thumb 2 79 지원하지 않음 4
::-webkit-scrollbar-button 2 79 지원하지 않음 4
scrollbar-color 지원하지 않음 지원하지 않음 64 지원하지 않음
scrollbar-width 지원하지 않음 지원하지 않음 64 지원하지 않음

마지막 업데이트 정보: 2023-12-14

스크롤바(Scrollbars) 커스텀 스타일링에 대한 모바일 브라우저 호환성
모바일
모바일 Chrome
Chrome
모바일 Firefox
Firefox
Safari
Safari
::-webkit-scrollbar 18 지원하지 않음 13, only display: none
::-webkit-scrollbar-track 18 지원하지 않음 지원하지 않음
::-webkit-scrollbar-thumb 18 지원하지 않음 지원하지 않음
::-webkit-scrollbar-button 8 지원하지 않음 지원하지 않음
scrollbar-color 지원하지 않음 64 지원하지 않음
scrollbar-width 지원하지 않음 64 지원하지 않음