굳이 슬라이드로 만들 필요가 없는, 가로 스크롤 컴포넌트가 필요한 경우가 있습니다. 아래와 같은 경우죠. 추천 도서 목록인데 굳이 JS 슬라이드 라이브러리를 쓸 거 없이 overflow-x를 scroll로 지정해 주면 깔끔합니다.
이슈 하나를 해결해야 했습니다. 모바일에서는 가로 스크롤바가 예쁘게 나오지만 데스크톱에서는 그렇지 않다는 점입니다.
그래서 CSS로 가로 스크롤바를 모바일(혹은 맥 스타일)로 바꿔 줬습니다. 위에 모양이 적용된 게 보이실 겁니다.
아래는 CSS 코드입니다. 설명은 주석으로 달아 두었습니다.
.pretty-scrollbar {
/* firefox 스크롤바의 색상을 지정합니다. */
scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
/* firefox 스크롤바의 두께를 지정합니다. */
scrollbar-width: thin;
}
.pretty-scrollbar::-webkit-scrollbar {
width: 6px; /* 세로축 스크롤바의 두께 */
height: 6px; /* 가로축 스크롤바의 높이 */
}
.pretty-scrollbar::-webkit-scrollbar-track {
background-color: transparent; /* 스크롤바의 트랙 색상 */
}
.pretty-scrollbar::-webkit-scrollbar-thumb {
border-radius: 3px; /* 스크롤바의 손잡이 모양 */
background-color: rgba(0, 0, 0, 0.2); /* 스크롤바의 손잡이 색상 */
}
.pretty-scrollbar::-webkit-scrollbar-button {
display: none; /* 스크롤바의 버튼을 숨김 */
}컨테이너의 CSS는 아래와 같이 하면 될 겁니다. scroll-behavior: smooth;를 주목하세요.
.container {
max-width: 600px;
display: flex;
gap: 20px;
overflow-x: scroll;
/* 데스크톱 브라우저에서 부드러운 스크롤 */
scroll-behavior: smooth;
}사진 Taylor Flowe on Unsplash
댓글 남기기