스크롤 바 숨기기 & 커스텀

스크롤 바를 숨기거나 커스텀 하는 일이 종종 있어 정리했다.

 

스크롤바 숨기기

스크롤 기능만 남기고 스크롤 바는 없애려면 스크롤 되는 영역에 아래 css를 적용하면 된다.

/* 스크롤바 숨기기  */
.scroll {
  -ms-overflow-style: none; /* IE */
  scrollbar-width: none; /* Firefox */
}
.scroll::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera, Edge */
}

 

See the Pen scrollbar - none by pminsun (@pminsun) on CodePen.

 

 

스크롤바 커스텀

스크롤 바 커스텀 하기 위해서는 스크롤 되는 영역에 3가지 css를 적용하면 된다.

• ::-webkit-scrollbar - 스크롤 바 영역
• ::-webkit-scrollbar-thumb - 스크롤 바 막대
• ::-webkit-scrollbar-track - 스크롤 바 트랙

/* 커스텀 */
.scroll::-webkit-scrollbar {
    width: 10px;  /* 스크롤바의 너비 */
}

.scroll::-webkit-scrollbar-thumb {
    height: 30%; /* 스크롤바의 길이 */
    background: #6600ba; /* 스크롤바의 색상 */
    border-radius: 10px;
}

.scroll::-webkit-scrollbar-track {
    background: rgba(102, 0, 186, .1);  /*스크롤바 뒷 배경 색상*/
}

 

 

See the Pen scrollbar - custom by pminsun (@pminsun) on CodePen.

 

Tailwind에서 스크롤 숨기거나 커스텀하기

tailwind에서 스크롤 커스텀하기 위해서는 globals.css 에 아래 코드를 추가하면 된다.

 

스크롤바 커스텀

::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #dbdbdb;
}
::-webkit-scrollbar-thumb {
  background: #999;
  border-radius: 6px;
}

 

다크모드 적용시

.dark ::-webkit-scrollbar-track {
  background: #0f172a;
}
.dark ::-webkit-scrollbar-thumb {
  background-color: #23345c;
}

 

 

참고

How to Change Style of Scrollbar using Tailwind CSS ? - GeeksforGeeks