나눔웹 퍼블리싱 꿀팁
지저분한 모바일 스크롤바, 기능은 남기고 쏙 숨기는 마법의 CSS
쇼핑몰의 상품 카테고리나 최신 트렌드의 메뉴바를 보면 손가락으로 좌우로 쓸어 넘기는 '가로 스와이프(Scroll)' 기능이 필수적으로 들어갑니다.
그런데 스마트폰 기종(안드로이드 등)이나 PC 브라우저로 볼 때, 메뉴 밑에 뚱뚱하고 못생긴 회색 스크롤바 막대기가 생겨서 공들인 디자인을 촌스럽게 망치는 경우가 많습니다.
💡 스크롤바를 숨기면 스크롤이 안 되는 것 아닌가요?
아닙니다! 브라우저의 CSS 속성을 이용하면 손가락으로 쓸어 넘기거나 마우스 휠을 돌리는 '기능'은 100% 완벽하게 살려둔 채, 눈에 보이는 시각적인 '막대기(UI)'만 투명하게 지워버릴 수 있습니다. 무거운 자바스크립트 플러그인을 쓸 필요도 없습니다.
1. 크롬, 사파리 등 웹킷(Webkit) 브라우저 제어
전 세계 점유율의 80% 이상을 차지하는 크롬, 사파리, 최신 엣지 브라우저에서는 ::-webkit-scrollbar라는 가상 요소를 호출하여 display: none; 처리해 주면 됩니다.
/* 스크롤 영역에 클래스(예: .scroll-box)를 주고 아래 코드를 추가하세요 */
.scroll-box::-webkit-scrollbar {
/* 스크롤바 막대기 자체를 아예 그려내지 않음 */
display: none;
}2. 파이어폭스(Firefox) 및 구형 IE까지 완벽 방어하기
진정한 프로 퍼블리셔라면 웹킷 계열이 아닌 파이어폭스 같은 다른 브라우저에서의 크로스 브라우징(Cross-browsing)도 고려해야 합니다. 아래의 코드를 스크롤되는 박스 자체에 추가해주면 100% 완벽하게 가려집니다.
/* 모든 브라우저를 통합 방어하는 마스터 코드 */
.scroll-box {
/* 파이어폭스용 스크롤바 숨김 속성 */
scrollbar-width: none;
/* 구형 인터넷 익스플로러(IE) 및 레거시 엣지용 */
-ms-overflow-style: none;
}
.scroll-box::-webkit-scrollbar {
/* 크롬, 사파리, 최신 엣지용 */
display: none;
}"군더더기를 덜어낼수록 디자인은 더욱 세련되어집니다."
나눔웹은 복잡한 스크립트 남용을 지양하고, 가장 가벼운 순수 CSS만으로
네이티브 앱(App)처럼 깔끔하고 직관적인 UI 인터페이스를 퍼블리싱합니다.