앱을 보면 스크롤 효과는 대부분 보이지 않게 처리합니다.
대신 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
반응형
'개발 > CSS' 카테고리의 다른 글
[CSS] transition에 대해 알아봅시다 (0) | 2024.11.21 |
---|---|
display:grid 간단 사용법과 grid로 반응형 하는 법 (2) | 2024.11.18 |
display: flex;에 대해 알아봅시다 (0) | 2024.11.17 |
HTML, CSS 자동 완성 모음집 (zen 코딩하는 법) (1) | 2024.11.10 |
text-overflow 2줄 ellipsis (텍스트 2줄 이상 ...처리하기) (0) | 2024.10.31 |