[티스토리 스킨 만들기] 스크롤 바 모양 바꾸기, 스크롤 바 버튼 삭제 CSS 편집

[티스토리 스킨 만들기] 스크롤 바 모양 바꾸기, 버튼 삭제 CSS 편집

---

 

오늘 또 여러 가지 편집하면서 올리게 되네요!

 

이번에는 스크롤 바

 

 

이런 걸 바꿀 겁니다.

 

이걸 왜 바꾸냐면 반응형 2 스킨에서 메뉴를 열면 정말 안 이쁘거든요;;

 

그래서 메뉴에서는 안 보이게 하려고 했으나

 

코드를 못 찾겠어서

 

모양을 좀 이쁘게? 만들려고 합니다.

 

언젠가 찾게 되겠죠 프로필 이미지 크기도 찾은 것처럼ㅎㅎ

 

 

이번에는 수정이 아닌 그냥 CSS에 넣으시면 됩니다.

 

스킨마다 다르겠지만

 

반응형 2에서는 직접 넣어줘야 합니다.

 

/* 스크롤 바 */
::-webkit-scrollbar { width: 15px; }
::-webkit-scrollbar-track { background-color: #F3F3F3; }
::-webkit-scrollbar-thumb { background-color: #BDBDBD; }
::-webkit-scrollbar-button { display: none; }

 

width를 수정해서 넓이도 수정해줍시다.

 

기존 스크롤바는 꽉 찬 느낌이 아니라서 약간 불편한 느낌이 있었지만 이렇게 해주면 꽉 차 보입니다.

 

track에는 스크롤 바 밑에 색깔을 넣어주고

 

thumb에는 바 색깔을 넣어줍니다.

 

네이버에 html 색상표라고 검색하시면 색상 코드를 얻을 수 있으니 참고하세요!

 

 

그리고 중요한 게

 

스크롤 바 버튼을 없애줄 겁니다.

 

이게 있으니까 메뉴에서 별로 안 이쁘더라고요.

 

그래서

 

::-webkit-scrollbar-button { display: none; }

을 넣어줍니다.

 

이게 보이지 않을 뿐이지 해당 위치를 누르니까 기능은 남아있었습니다.

 

여러분 나름대로 예쁘게 꾸미시길 바랍니다!

 

그리고 반응형 메뉴의 스크롤 바 없애는 방법 아시는 분 댓글 좀 부탁드립니다!