CSS3 스크롤바 스타일

 웹 페이지를 꾸미다보면 스크롤바가 어울리지 않아서 제거하거나 변경해하는 경우가 더러 생긴다.

여기서는 CSS3를 이용하여 webkit기반의 웹 브라우저에서 스크롤바 스타일을 변경하는 방법에 대해서 알아볼 것 이다.

지금 부터 나오는 ::-webkit-scrollbar~~~ 이런건 가상 요소이다.

스크롤바를 지칭하는 요소다~ 라고 대충 생각하자.

::-webkit-scrollbar {

      width:auto;

}

이 요소를 지정하게 되면 기존의 해당 요소에서 사용되던 스크롤바는 모두 웹킷 스크롤바로 대체된다.

해당 스타일을 적용하는 순간 부터 그 요소는 기존 스크롤바 대신 웹 킷 스크롤바가 적용되게 된다.

OS의 스크롤바가 아닌 웹킷의 스크롤바가 되었으므로, 스크롤바 스타일을 입힐 수 있게 된다.

여기에 별 다른 효과를 추가하지 않을 경우 스크롤바 없이 스크롤 되어 보이는 것 처럼 연출하는 것도 충분하다.

다음은 스크롤바의 뒷 배경이다.

::-webkit-scrollbar-track {

      background-color: white;

}

뒷 배경은 약간 연한 회색의 부분이다. 스크롤바가 위치하는 배경 부분의 스타일을 변경할 수 있다.

다음은 스크롤바에서 바이다.

::-webkit-scrollbar-thumb {

      background-color: black;

}

움직이는 바 부분을 지정한다.

다음은 위 아래 버튼이다.

::-webkit-scrollbar-button {

     

}

위 아래 버튼은 스크롤바에서 화살표 표시인 부분이다. display:none;을 주면 화살표가 보이지 않게도 가능하다.

다음과 같은 스크롤바에서 버튼 부분(사진은 메모장을 이용하였다.)

다음은 코너 부분

::-webkit-scrollbar-corner {

      background-color: black;

}

가로 스크롤바와 세로 스크롤바가 곂치는 우측하단의 작은 영역이다.

이러한 부분(사진은 메모장을 이용했다.)

지금까지 CSS3에서 스크롤바 스타일을 변경하는 방법에 대해서 알아보았다.

수정이나 추가할 사항에 대해서는 덧글을 남겨주시면 최대한 반영하도록 하겠습니다.