React styled-components 스크롤 바 설정

김태희·2024년 2월 20일
0

프론트

목록 보기
9/13
post-custom-banner
//스크롤 하는 영역
const ScrollContainer = styled.div
  width: 528px;
  height: 669px;
  margin: 63px 0 0 0;
  display: inline-flex; //컨테이너랑 스크롤바 가로배치
  overflow-y: scroll;
  overflow-x: clip; //오버플로 잘리고 나머지 콘텐츠 표시x

  &::-webkit-scrollbar { //스크롤바 전체
    width: 8px;
    height: 608px;
  }

  &::-webkit-scrollbar-thumb { //스크롤 움직이는 작은 막대
    background: #79110E;
    height: 20%;
    border-radius: 10px;
  }

  &::-webkit-scrollbar-track { //스크롤바 배경색
    background: #B3B3B3;
    border-radius: 10px;
  }
`;

참고링크1
참고링크2

profile
내 븨로그
post-custom-banner

0개의 댓글