[CSS] 스크롤바 커스텀하기

스크롤바 커스텀을 적용하고 싶은 CSS에 아래를 추가해주면 된다.

 

::-webkit-scrollbar {
  //width: 스크롤바 너비;
}
 
::-webkit-scrollbar-track {
  //스크롤 영역 스타일
}
 
::-webkit-scrollbar-thumb {
  //스크롤 막대 스타일
}

 

예시 |

 

::-webkit-scrollbar {
  width: 10px;
}
 
::-webkit-scrollbar-track {
  background: #eeeeee;
}
 
::-webkit-scrollbar-thumb {
  background: linear-gradient(#c2e59c, #64b3f4);
}

 

 

이런 식으로 그라디언트를 넣어줄 수도 있다.

 

::-webkit-scrollbar {
  width: 10px;
}
 
::-webkit-scrollbar-track {
  background: #eeeeee;
  border-radius: 5px;
}
 
::-webkit-scrollbar-thumb {
  background: linear-gradient(#c2e59c, #64b3f4);
  border-radius: 5px;
}

 

이렇게 border-radius를 주면

동글동글

 

::-webkit-scrollbar-track {
  display: none;
}

 

아예 스크롤 영역을 안 보이게 해버릴 수도 있다.

깔끔하다

 

이런 식으로 커스텀해줄 수 있다.

티스토리 스킨 편집 CSS에 넣어주면 티스토리에도 적용할 수 있다.