본문 바로가기
Background
개발/CSS

스크롤 바를 변경하거나 안 보이게 하는 코드

by BellRiver_Lee 2024. 11. 14.

앱을 보면 스크롤 효과는 대부분 보이지 않게 처리합니다.
대신 UI로 컨텐츠가 더 있음을 암시하는 방법이 더 선호되는 것 같습니다.
(특히 가로 스크롤은 대부분 보이지 않게 처리하지요.)

물론 케바케이지만 스크롤 바가 이쁘지 않거나 거추장스러워서 빼고 싶어 하는 디자이너 분들을 많이 뵈었습니다.
이런 디자이너 분들의 요구에 맞는 코드를 가져왔습니다.

앱에 익숙한 요즘 사람들에게 비슷한 사용 환경을 제공하기 위해서
스크롤 바를 변경하거나 보이지 않게 처리하는 코드는 아래를 참고해 주시기 바랍니다.

body 태그를 스크롤이 생기는 요소로 치환하면 바로 사용하실 수 있습니다!

/* 스크롤 바 변경 */
body::-webkit-scrollbar { width: 3px; /*스크롤 바의 너비*/ } 
body::-webkit-scrollbar-thumb { background-color: #333; /*스크롤 바의 색상*/ } 
body::-webkit-scrollbar-track { background-color: #fff; /*스크롤 바 트랙 색상*/ } 

/* 스크롤 바 없애기 */
body::-webkit-scrollbar { width: 0px;height:0;} 
body::-webkit-scrollbar-thumb { background-color: transparent;} 
body::-webkit-scrollbar-track { background-color: transparent;}
728x90
반응형