친절한효자손 취미생활

아니 대체 왜!? 일부 사이트는 브라우저의 세로 스크롤바 가로 크기를 꼬딱지만하게 줄여놓는 것일까요? 클릭도 잘 안 되고 현재 어디까지 내려왔는지 눈에 띄지도 않습니다. 그래서 매우 불편합니다. 물론 터치스크린의 경우에는 화면을 스와이프하면서 슥슥슥 내리고 올릴 수 있습니다. PC의 경우 마우스휠을 사용해서 올리거나 내릴 수 있습니다.

 

「근데! 한 방에 많이 내리거나 올리고 싶은데 그럴 수가 없잖여!」

 

그렇습니다. 저는 아직까지도 스크롤바를 정말 유용하게 사용하고 있습니다. 원하는 지점으로 빠르게 내리거나 올릴 때 정말 편리하거든요. 콘텐츠양이 얼마 되지 않는 본문이라면 모르겠지만 양이 어마무시한 글의 경우라면 마우스 휠로 조작하기란 매우 번거로운 일인 것입니다. 화면 터치 조작은 그나마 좀 나은 편이긴 하죠. 아무튼! 브라우저의 세로 스크롤바는 정말 유용한 것입니다. 그래서 이것을 CSS에서 커스텀하는 방법에 대해 알아봅시다. 티스토리에도 적용 가능하며 현재 친효스킨에는 이 방식이 적용된 상태입니다. 이 방법은 IE와 엣지 브라우저에서는 사용이 불가합니다.

 

CSS

아래의 내용만 스킨편집 > HTML 편집 > CSS 항목에 적당히 빈 공간을 확보해 넣으시기 바랍니다. 첨부파일로도 업로드 해두겠습니다.

 

친효스킨 스크롤바.txt
0.00MB

 

/* 스크롤바 가로 사이즈 */
::-webkit-scrollbar {
    width: 20px;
}

/* 스크롤바 막대기 */
::-webkit-scrollbar-thumb {
    border-radius: 20px;
    background-color: #555;
}

/* 스크롤바 백그라운드 */
::-webkit-scrollbar-track {
    background-color: #fff;
}

각 코드에 대한 설명은 주석으로 달아놨으니 어렵지 않게 제어하실 수 있으실 겁니다. 그래도 어떤 부분인지 이해가 되지 않으시는 분들을 위해 스크린샷으로 설명드리겠습니다.

 

친효스킨에 적용된 스크롤바 CSS입니다. 빨간색 화살표가 「스크롤바 막대기」에 해당되며 파란색 화살표가 「스크롤바 백그라운드」에 해당됩니다. 세로 사이즈는 따로 편집할 필요가 없습니다. 늘 세로로 100% 채워지니까요. 따라서 두께 부분만 변경해도 되기에 ::webkit-scrollbar에서 width만 설정하는 것입니다.

 

:hover 그리고 :active도 사용 가능 단 transition는 불가

혹시 마우스를 올렸을 때 변화를 줄 수 있는 :hover도 사용할 수 있는지 테스트해봤는데 적용 가능하다는 사실을 알았습니다. 또한 마우스를 클릭해 움직이고 있는 상황에 대한 옵션인 :active도 적용 가능합니다. 친효스킨에 적용된 CSS 풀버전은 다음과 같습니다.

 

/* 스크롤바 가로 사이즈 */
::-webkit-scrollbar {
    width: 20px;
}

/* 스크롤바 막대기 */
::-webkit-scrollbar-thumb {
    border-radius: 20px;
    background-color: #555;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #f54;
}

::-webkit-scrollbar-thumb:active {
    background-color: #f00;
}

/* 스크롤바 백그라운드 */
::-webkit-scrollbar-track {
    background-color: #fff;
}

::-webkit-scrollbar-track:hover {
    background-color: #eee;
}

그렇습니다. 이렇게 적용되어 있습니다. 여기에 마우스를 올리면 색상이 확 바뀌지 않고 천천히 변화하는 효과를 연출하고 싶어서 transition 도 사용해 보았습니다. 하지만 적용은 되지 않더군요. 방법이 있는데 아직까지 제가 모르는 것일수도 있구요. 혹시라도 이 부분에 대해 잘 아시는 분께서 우연히 이 글을 보신다면 꼭 댓글로 가르침을 전수해주시면 감사하겠습니다. 바로 적용시켜 보겠습니다. 끝.

공유하기

facebook twitter kakaoTalk kakaostory naver band