스크롤바(scrollbar) 에 스타일 적용

webkit 브라우저(크롬, 사파리, 오페라)에 한해 스타일을 적용할 수 있습니다.

• ::-webkit-scrollbar : 스크롤바 전체
• ::-webkit-scrollbar-track : 스크롤 트랙
• ::-webkit-scrollbar-thumb : 스크롤 핸들

이외에도

• ::-webkit-scrollbar-button : 스크롤 바 위의 업 다운 화살표 버튼
• ::-webkit-scrollbar-track-piece : 핸들에 의해 가려지지 않은 나머지 스크롤바
• ::-webkit-scrollbar-corner : 수평, 수직의 스크롤 바가 만나는 화면 하단 스크롤바의 코너.
• ::-webkit-resizer : 특정엘리먼트(주로 textarea)의 하단에 있는 드래그 가능한 리사이징 핸들.

css

  .container {
    width: 250px;
    height: 250px;
    overflow: auto;
    background-color: white;
  }
  .container::-webkit-scrollbar {
    width: 10px;
  }

  .container::-webkit-scrollbar-track {
    background-color: grey;
    border-radius: 10px;
    box-shadow: inset 0px 0px 5px white;
  }

  .container::-webkit-scrollbar-thumb {
    background-color: #2f3542;
    border-radius: 10px;
    background-clip: padding-box;
    border: 2px solid transparent;
  }

html

<div class="container"></div>

See the Pen 세로로 글자 넣기 by younghyeong ryu (@wangta69) on CodePen.

예전 IE에서 작동했던 것 (모던 브라우저에서는 작동 안함)

<textarea class="container"> </textarea> 

.container {
  scrollbar-face-color: #FFFFFF; 
  scrollbar-shadow-color: #FFFFFF; 
  scrollbar-highlight-color: #FFFFFF;
  scrollbar-3dlight-color: #FFFFFF; 
  scrollbar-darkshadow-color: #FFFFFF; 
  scrollbar-track-color: #FFFFFF; 
  scrollbar-arrow-color: #FFFFFF;
}