CSS로 블로그 스크롤 바 스타일 지정하기(IE, Safari, Chrome)

웹페이지 글이 길어지면 화면 오른쪽이나 아래에 스크롤 바가 나타난다. 대부분 회색 배경에 하얀 화살표가 나타난다. CSS를 사용해서 스크롤 바를 꾸며보자. fleXcroll이나 jScrollPane이라는 jQuery 플러그인을 사용하면 모든 브라우저에 스크롤 바를 적용할 수 있지만, 이번엔 그냥 CSS만 사용해서 IE, Chrome, Safari의 스크롤 바를 바꿔보자.

Internet Explorer용 코드
html {scrollbar-3dLight-Color: #efefef; scrollbar-arrow-color: #dfdfdf; scrollbar-base-color: #efefef; scrollbar-Face-Color: #dfdfdf; scrollbar-Track-Color: #efefef; scrollbar-DarkShadow-Color: #efefef; scrollbar-Highlight-Color: #efefef; scrollbar-Shadow-Color: #efefef}
Webkit(Safari, Chrome)용 코드
/* Chrome, Safari용 스크롤 바 */
::-webkit-scrollbar {width: 8px; height: 8px; border: 3px solid #fff; }
::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {display: block; height: 10px; background: url('./images/bg.png') #efefef}
::-webkit-scrollbar-track {background: #efefef; -webkit-border-radius: 10px; border-radius:10px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.2)}
::-webkit-scrollbar-thumb {height: 50px; width: 50px; background: rgba(0,0,0,.2); -webkit-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.1)}

늘 하던 것처럼 위 CSS를 [티스토리 관리 화면] - [스킨] - [HTML/CSS 편집] - [style.css]에 맨 아래에 붙여 넣는다. 이 스타일을 기본으로 원하는 스타일을 적용하면 된다.

일단 IE 스타일을 살펴보자. IE는 스크롤 바 각 요소의 색만 바꿀 수 있다. scrollbar-arrow-color는 스크롤 바 아래위 왼쪽 오른쪽 화살표 색이다. scrollbar-base-color는 스크롤 바 전체 배경 색이다. scrollbar-Face-Color는 상하좌우로 움직이는 부분(thumb), 화살표가 포함된 상하좌우 끝 사각형 부분(button) 색이다. scrollbar-Track-Color는 스크롤 바 thumb를 제외한 나머지 빈 부분 색이다. scrollbar-DarkShadow-Color, scrollbar-Shadow-Color는 스크롤 바 thumb, button의 오른쪽과 아래, 즉, 어두운 부분 색이다. scrollbar-3dLight-Color, scrollbar-Highlight-Color는 스크롤 바 thumb, button의 왼쪽과 위, 즉, 밝은 부분 색이다. /'pəlp/ 블로그처럼 스크롤 바 화살표를 없애려면 scrollbar-arrow-color와 scrollbar-Face-Color를 같은 색으로 지정하면 된다. 그 외 나머지 요소 역시 블로그 스킨이나 웹페이지 구성에 맞게 적당한 색을 지정하면 스크롤 바 스타일을 바꿀 수 있다. 주의할 것은 IE에 스크롤 바 CSS를 적용하려면 html 즉, 페이지 전체에 적용해야 한다는 점이다. IE 스크롤 바 스타일은 IE5 이상에 적용된다.

Webkit용 스타일은 좀 더 복잡하다. 일단 사용할 수 있는 가상 요소와 가상 선택자를 살펴보자.

가상 요소 종류
::-webkit-scrollbar스크롤 바 영역 전체
::-webkit-scrollbar-button상하, 좌우 화살표가 포함된 부분
::-webkit-scrollbar-track화살표를 제외한 몸통 부분
::-webkit-scrollbar-track-piece몸통 부분에서 실제 움직이는 부분을 제외한 나머지 길
::-webkit-scrollbar-thumb몸통 부분에서 실제 움직이는 부분
::-webkit-scrollbar-corner상하/ 좌우 스크롤 바가 만날 때 오른쪽 아래 공간
::-webkit-resizercorner 공간으로 크기를 변경할 수 있음
가상 선택자 종류
:horizontal좌우 스크롤 바의 모든 요소에 적용
:vertical상하 스크롤 바의 모든 요소에 적용
:decrement스크롤 바에서 윗쪽, 왼쪽 방향 button, track 요소에 적용
:increment스크롤 바에서 아래쪽, 오른쪽 방향 button, track 요소에 적용
:startthumb 이전에 위치한 button, track 요소에 적용
:endthumb 이후에 위치한 button, track 요소에 적용
:double-button상하 화살표가 붙어 두 개가 한꺼번에 표시된 요소에 적용 (좌우도 같음)
:single-button상하 화살표가 아래 위 따로 나뉘어 표시된 요소에 적용 (좌우도 같음)
:no-button화살표 button이 없는 요소에 적용
:corner-present스크롤 바 corner가 있는 요소에 적용
:window-inactive지금 활성화된 창의 스크롤 바에 적용

가상 요소는 말 그대로 가상으로 사용할 수 있는 요소(element)다. CSS에선 span, p, div 등 HTML 각 요소를 선택해서 스타일을 적용하지만, 스크롤 바는 HTML 태그로 지정할 수도, class나 id를 부여할 수도 없으므로 가상 요소를 사용해야 한다. 위의 가상 요소(::-webkit으로 시작하는 항목)는 일반 요소처럼 사용할 수 있다. 예를 들어 span 요소에 배경색을 지정할 때 span {background:#ccc}라고 스타일을 지정하듯 ::-webkit--scrollbar {width: 12px; height: 12px}처럼 스타일을 지정할 수 있다. 가상 선택자는 webkit 엔진에서 스크롤 바 스타일을 지정할 때 적용할 수 있도록 제공된 선택자다. :link, :hover, :first-child, :last-child 등의 가상 선택자를 사용할 때처럼 webkit 스크롤 바 스타일엔 위의 가상 선택자를 추가로 사용할 수 있다. 예를 들어 오른쪽 스크롤 바 위로 화살표 스타일을 지정하려면 ::webkit-scrollbar-button:start:decrement {background:#efefef}처럼 사용할 수 있다.

Chrome, Safari에서만 스크롤 바 스타일이 적용됩니다.

그럼 위의 예제 코드에서 webkit 부분 CSS만 살펴보자. ::-webkit-scrollbar {width: 8px; height: 8px; border: 3px solid #fff; }는 스크롤 바 전체 너비를 8px로 지정한다. width와 height를 모두 지정하였으므로 상하 스크롤 바, 좌우 스크롤 바 모두 너비가 8픽셀이 된다. border 부분은 원래 사용할 필요가 없지만, 내 블록에 적용했을 때 검은색 부분이 약간 나타나서 임시로 사용했다. 이유를 알 수 없는 검은 점들이 border를 지정하자 없어졌다. ::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {display: block; height: 10px; background: url('./images/bg.png') #efefef}는 스크롤 바 위, 왼쪽 화살표와 아래, 오른쪽 화살표 스타일이다. display: block과 height: 10px을 함께 사용해서 화살표 영역 자체에 block 속성을 부여하고 높이를 10픽셀로 지정했다. background로 블로그 배경과 같은 이미지를 지정했고 이미지를 사용할 수 없을 때 배경 색으로 표시되도록 #efefef를 함께 사용했다. ::-webkit-scrollbar-track {background: #efefef; -webkit-border-radius: 10px; border-radius:10px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.2)}는 화살표를 제외한 몸통 부분으로 배경 색을 지정하고 border-radius, box-shadow 속성을 부여했다. border-radius는 테두리를 둥글게 만드는 것이고 box-shadow는 지정한 영역에 그림자를 표시하는 것이다. ::-webkit-scrollbar-thumb {height: 50px; width: 50px; background: rgba(0,0,0,.2); -webkit-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.1)}는 스크롤 바 몸통에서 실제 움직이는 막대 부분 스타일이다. height와 width를 모두 지정해서 기본 크기를 50픽셀로 고정하고 배경 색, border-radius, box-shadow 속성을 부여했다. 실제로 적용하면 위의 예와 같다. 물론 Chrome, Safari에서만 스타일이 적용되고 나머지 IE, Opera, Firefox에선 일반 스크롤 바로 보인다.

Webkit용 스크롤 바는 Styling ScrollbarsCustom Scrollbars in WebKit에서 상세한 정보와 예제를 확인할 수 있다.

webkit용 스크롤 바 CSS는 JavaScript를 사용하는 다른 스크롤 바와 비교하면 적용되는 브라우저가 제한적이라는 단점이 있지만, JavaScript를 내려받는 시간, 연산 시간이 소요되지 않아서 페이지 지연이 없다. 또 배경 그림, 배경 색, box-shadow, border-radius 등 webkit에서 지원하는 모든 CSS 속성을 사용할 수 있으므로 다양한 모양으로 꾸밀 수 있다.

Comment

  1. Unknown Visitor Favicon of http://orionj.tistory.com BlogIcon ggobi_jw 2012.01.26 14:59 신고

    덕분에 좋은 정보 찾았네요 ~

    새해 복 많이 받으세요~

    • Unknown Visitor Favicon of http://circlash.tistory.com BlogIcon circlash 2012.01.30 12:33 신고

      더 세부적인 내용은 게시물에 있는 링크 참고하시면 될겁니다~ 새해 복 많이 받으세요!!

  2. Unknown Visitor 2012.03.13 13:10

    비밀댓글입니다

    • Unknown Visitor Favicon of http://circlash.tistory.com BlogIcon circlash 2012.03.14 00:37 신고

      네, 방문 고맙습니다^^ 또 놀러오세요~

  3. Unknown Visitor fanta 2012.05.04 16:57 신고

    FF용 스트롤바 디자인변경은 안되는것 같은데 방법이 없을까요>?

    • Unknown Visitor Favicon of http://circlash.tistory.com BlogIcon circlash 2012.05.07 00:11 신고

      FF용은 아직 CSS로만 구현하는 방법이 없는 것으로 알고 있습니다. 대신 fleXcroll이나 jScrollPane 등 모든 브라우저에서 사용할 수 있는 jQuery 플러그인이 있습니다. 물론 기능은 훨씬훨씬 강력하죠.

      글 맨 처음 부분에 링크 있으니 한번 가서 둘러보세요~이쁜 샘플 많을 꺼에요^^

  4. Unknown Visitor Favicon of http://maks.tistory.com BlogIcon 엽탱 2012.07.29 10:06 신고

    정말 너무 고마운 도움이 되었습니다!
    이것 때문에 간혹 크롬에서 스크롤 바가 제대로 출력되지 않는 버그를
    이걸로 대체했네요!!

    정말 감사합니다.

    • Unknown Visitor Favicon of http://circlash.tistory.com BlogIcon circlash 2012.07.29 15:51 신고

      잘 되신다니 다행이네요^^

      크롬에서 스크롤바가 안나오는 버그가 있었군요. 몰랐던 사실인데 ㅎㅎ

      좋은 주말 보내세요~!

  5. Unknown Visitor Favicon of http://min-blog.tistory.com BlogIcon 백전백승 2012.11.07 16:37 신고

    이것을 하려고 알아봤는데 제가 원하는 글입니다. 감사합니다.

  6. Unknown Visitor gnpsl 2013.05.02 10:11 신고

    감솨함니당ㅋㄷ

  7. Unknown Visitor Favicon of http://sulljunu.tistory.com BlogIcon SOOL_ 2013.08.20 18:07 신고

    이 글 완전 도움됐어요!! 그런데 일반 홈페이지에서 사용하려면 head부분에 넣어야할까요..??

    • Unknown Visitor Favicon of http://circlash.tistory.com BlogIcon circlash 2013.08.21 08:22 신고

      style.css 등 별도의 파일로 작성한 스타일시트를 사용하신다면 style.css 파일에 작성하시면 되고, style.css를 따로 사용하시지 않는다면 head 부분에 style 요소를 추가해서 아래와 같은 형식으로 작성하면 됩니다.

      * IE용 스타일
      <head>
      ...
      <style tyle="text/css">
      html{
      scrollbar-arrow-color : #000088;
      scrollbar-base-color : #008800;
      }
      </style>
      </head>

      * webkit용 스타일
      <head>
      ...
      <style tyle="text/css">
      ::-webkit-scrollbar{
      width : 8px;
      }
      ::-webkit-scrollbar-track{
      background : #000088;
      }
      ::-webkit-scrollbar-thumb{
      height : 50px;
      background : #008800;
      }
      </style>
      </head>

      대략 요런 식으로 스타일 지정하시면 됩니다^^

  8. Unknown Visitor Favicon of http://sizsiz.tistory.com BlogIcon Siz시즈 2013.09.14 16:14 신고

    http://kinimage.naver.net/20130914_277/1379141985856ff0lc_PNG/s.png?type=w620
    스크롤바에서 저런 공백부분을 투명화 혹은 안보이게 하는 방법이 없을까요ㅠㅠ?

    • Unknown Visitor Favicon of http://circlash.tistory.com BlogIcon circlash 2013.09.15 00:17 신고

      적용하신 스타일 소스를 확인해보지 못해서 확실한 답은 드릴 수 없지만, 해당 부분의 배경을 투명색으로 지정하면 되지 않을까 싶은데요

      {background:transparent}

      위의 투명 배경 속성을 흰색이 보이는 그 부분에 적용해보세요~

  9. Unknown Visitor Favicon of https://goodbyeandhello.tistory.com BlogIcon 쏭. 2013.10.13 16:57 신고

    익스는 알고 있었는데, 크롬을 쓰고 있어서 구글링 해 봤더니,
    와~ 사파리까지~ 좋은 정보 감사합니다^-^
    근데, 둥글지 않게 익스 처럼 적용 할 수 없나요?

    • Unknown Visitor Favicon of http://circlash.tistory.com BlogIcon circlash 2013.10.13 17:33 신고

      스타일 적용 부분에서 -webkit-border-radius와 border-radius 부분을 삭제하시면 됩니다. 위의 예에서는 아래 부분을 삭제하시면 끝이 둥글지 않고 직각으로 됩니다.

      삭제할 부분
      -webkit-border-radius: 10px; border-radius:10px;
      -webkit-border-radius: 8px; border-radius: 8px;

    • Unknown Visitor Favicon of https://goodbyeandhello.tistory.com BlogIcon 쏭. 2013.10.14 21:42 신고

      답변 못 기다리고 다른 분이 올린 방법으로 해결했는데,
      빠르고 친절한 답변 감사드립니다.^^ 오늘 하루 마무리 잘하세요~*

  10. Unknown Visitor Favicon of http://kipid.tistory.com BlogIcon kipid 2014.05.27 02:03 신고

    잘 봤어요. 그런데 혹시 파이어폭스에서는 스크롤바 css로 어찌 바꿀 수 있는지 아시나요? 대충만 검색해서 그런지 못찾겠네요 =ㅇ=;;; (아 그리고 스마트폰에서 접속하면 reply쪽 탭이 안열리던데...)

    • Unknown Visitor Favicon of http://circlash.tistory.com BlogIcon circlash 2014.06.01 10:40 신고

      파이어폭스는 아직 CSS만으로 스크롤바를 바꿀 수 있는 방법은 없는 걸로 알고 있습니다.

      jQuery custom content scroller
      http://manos.malihu.gr/jquery-custom-content-scroller/

      위의 jQuery 플러그인을 사용하시면 브라우저에 관계없이 스크롤바를 변경할 수 있습니다.

      아, 스마트폰에서 reply가 안열리나요? 갤3, 지2에서 잘 되서 웬만한 기기에서 다 될 줄 알았는데 아닌가보네요. 혹시 시간날 때 들르시면 어떤 기기에서 어떤 웹브라우저 사용하실 때 안되는지 알려주고 가세요~~

    • Unknown Visitor Favicon of http://kipid.tistory.com BlogIcon kipid 2014.06.01 11:22 신고

      답변 감사합니다. 파폭은 없군요.
      안되는 기기는 갤s 였어요. 다른기기로 접속하면 잘 되던데... (갤s가 다른 문제도 많은걸로;;;; html 문서가 좀 복잡해지면 스크롤 탑 된다던지 하는..)

    • Unknown Visitor Favicon of http://circlash.tistory.com BlogIcon circlash 2014.06.02 12:54 신고

      정보 감사합니다~
      집에 굴러다니는 갤S로 테스트 한 번 해봐야겠네요.
      수정이 가능할진 모르겠지만요 ㅠㅠ
      즐거운 한 주 보내세요!

  11. Unknown Visitor yomm 2014.08.19 17:46 신고

    정보감사합니다.~