overflow

자식 요소의 크기가 부모 요소의 크기를 초과했을 때 자식 요소들의 출력 방식과 스크롤바 생성을 제어할 수 있다.
수직과 수평 방향은 각각 제어할 땐 oveflow-x, overflow-y로, 두 개를 동시에 제어할 때에는 overflow 속성을 사용한다.

visible : default 값. 자식 요소의 크기가 부모 요소를 벗어나도 그대로 출력.
auto : 자식 요소의 크기가 부모 요소의 크기를 초과했을 때에만 스크롤을 생성.
hidden : 부모 요소의 크기를 벗어난 부분은 출력하지 않음.
scroll : 항상 스크롤바를 생성하지만, 자식 요소의 크기가 부모 요소의 크기를 초과했을 때에만 스크롤바 기능이 작동.
overlay : 스크롤바가 DOM에서 공간을 따로 차지하지 않고, 자식 요소의 위를 덮는다.

스타일링

스크롤바를 CSS로 스타일링하는 것은 아직까지 표준화되지 않음. 하지만, Webkit 계열의 브라우저들은 자체적으로 스크롤바를 CSS로 스타일하는 방법이 있다. (유명한 브라우저에서 파이어폭스를 제외한 거의 모든 브라우저에 적용 가능) 파이어폭스 브라우저에서는 W3C의 실험적으로 작성된 웹 비표준 사본에 근거한 CSS로 스타일할 수 있다. (해당 방법은 크롬과 엣지에도 적용이 가능)

::-webkit-scrollbar : 전체 스크롤바
::-webkit-scrollbar-track : 스크롤바의 트랙(진행률 표시 바)
::-webkit-scrollbar-thumb : 드래그 가능한 스크롤 핸들
::-webkit-scrollbar-button : 스크롤바의 화살표 모양의 버튼

::-webkit-scrollbar 가상 요소는 스크롤바 선택자와 커스텀 스타일링에 있어서 스타일이 적용되는 우선순위에 해당하는 선택자이므로, WebKit 브라우저에서 스크롤바 CSS 스타일링을 하려면 ::-webkit-scrollbar를 명시적으로 스타일링해야 함.

WebKit 계열 브라우저들에서 제공하는 스크롤바에 관련된 가상 클래스 선택자에는 transition과 animation 관련 속성들이 작동하지 않는다.

파이어폭스 브라우저에는 다음과 같은 속성을 이용하여 스타일링 할 수 있다.

scrollbar-color: 스크롤바의 색상을 지정.
scrollbar-width : 스크롤바의 폭을 지정

파이어폭스에서 사용하는 스크롤바에 관련된 속성은 스크롤바의 색상과 폭만 커스텀으로 지원하고 있어서 코너에 라운드 효과는 추가할 수 없고, 스크롤바의 폭은 기본 폭에서 좀 더 가는 정도만 설정할 수 있다.

참고 자료

[HTML, CSS] 스크롤바 생성 overflow (auto, scroll, hidden)
CSS 스크롤바(Scrollbars) 커스텀 스타일링