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;
}
실제 적용 모습 [파이어폭스를 비롯한 크롬, 엣지 브라우저]에서 적용됩니다.
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;
}
실제 적용 모습 [파이어폭스를 비롯한 크롬, 엣지 브라우저]에서 적용됩니다.
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;
}
실제 적용 모습 [파이어폭스를 비롯한 크롬, 엣지 브라우저]에서 적용됩니다.
.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;
}

마지막 업데이트 정보: 2024-05-12

마지막 업데이트 정보: 2024-05-12