스크롤바 커스텀하기

BEFORE	AFTER

 

 

 

CSS

  

    
    
    
    
  
/* Scrollbar */
::-webkit-scrollbar {
    width: 14px; /* 세로축 스크롤바 길이 */
    height: 14px; /* 가로축 스크롤바 길이 */
}

/* Top, Left 방향의 이동버튼 */
::-webkit-scrollbar-button:start {
    background-color: rgba(255, 255, 255, 0);
}

/* Bottom, Right 방향의 이동버튼 */
::-webkit-scrollbar-button:end {
    background-color: rgba(255, 255, 255, 0);;
}

/* 스크롤 바 배경 색상 */
::-webkit-scrollbar-track-piece {
    background-color: rgba(255, 255, 255, 0);;
}

/* 스크롤 바 색상 */
::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: gray; /* 원하는 색상 입력 */
}