[CSS] scroll bar 꾸미기

썸네일 출처

정해놓은 height를 넘어가면 자동으로 scroll bar가 생기도록 하려면 overflow 와 height 속성을 사용한다.
scrollbar 꾸미기 관련 참고 블로그

.box {
  height: 500px;
  overflow: auto; 
  overflow-x: hidden; 
  // 가로 스크롤바를 숨기고 싶을 때. 세로를 숨기고 싶다면 overflow-y: hidden으로 설정하면 됨
}

// 전체 scroll bar (thumb, track을 감싸는 container, 전체 영역)
.box::webkit-scrollbar {
}

// scroll bar 자체의 배경 (thumb의 box로 scroll이 움직이는 영역)
.box::webkit-scrollbar-track {
}

// scroll bar 에서 scroll 자체
.box::webkit-scrollbar-thumb {
	background-clip : padding-box;
    border: 3px solid transparent;
}

thumb와 track 사이 공간을 주고 싶을 때는 thumb의 background-clip을 padding-box로 설정하고, border을 투명으로 해서 실제로 padding 값을 주지 않더라도 마치 공간이 있는 것처럼 설정할 수 있다. (padding, margin은 적용되지 않음)

overflow 속성은 길이가 고정되어 있고 && block 속성일 때 작동.

• visible : 내용이 박스를 벗어나도 그대로 출력함 (default)
• hidden : 내용이 박스를 벗어나면 벗어난 부분은 출력하지 않음
• scroll : 내용이 박스를 벗어남에 관계없이 scroll 생성
• auto : 내용이 박스를 벗어나면 scroll 생성