react & styled-components로 스크롤 꾸미기

웹 사이트에서 왠만해서는 스크롤 기능을 넣지 않으려고 했다.

스크롤이 계속 남으면 거슬리기도 하고 제대로 꾸미지 않으면 

사용자는 내용이 짤린 영역을 어떻게 봐야될지 모를 수도 있다. (경험담..ㅠㅠ)

 

그래서 간단하지만 스크롤에 대해서 정리해보면서 어떻게 꾸몄는지 정리를 해보려고 한다.

 

1. 스크롤바 스타일에 관한 웹 표준은 존재하지 않는다.

다만, webkit에 한해서 가상요소를 사용하여 스타일을 적용할 수 있다.

https://caniuse.com/?search=-webkit-scrollbar

 

우선 스크롤을 다루기 위해서 아래와 같은 요소를 신경써주면 좋다. (참고: 가상 요소는 이것 보다 더 있다.)

• ::webkit-scrollbar: 스크롤바 전체
• ::webkit-scrollbar-thumb: 스크롤 막대
• ::webkit-scrollbar-track: 스크롤 막대가 움직일 길(공간)

2. styled-components를 이용한 스크롤바 스타일 적용하기

최종 결과물

import styled from "styled-components";

const Nav = styled.nav`
  display: flex;
  overflow: auto;
  height: 45px;
  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.4);
  }
  &::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
  }
`;