안녕하세요

221019 메가박스 리액트 - 예매페이지 css 스크롤바 본문

프론트엔드 국비교육/구현한 웹페이지

221019 메가박스 리액트 - 예매페이지 css 스크롤바

sakuraop 2022. 10. 19. 16:08

스크롤바를 커스텀합니다.

scroll이 적용된 영역에서 ::-webkil-scrollbar 에 관련된 css로 형태를 지정할 수 있습니다.

                .scroll {
                    overflow-y: scroll;
                    height: 450px;
                    width: 100%;
                    &::-webkit-scrollbar {
                        width: 6px; /* 스크롤바의 너비 */
                    }
                    &::-webkit-scrollbar-thumb {
                        background: #555555; /* 스크롤바의 색상 */
                        border-radius: 10px;
                    }
                    &::-webkit-scrollbar-track {
                        background: rgba(33, 122, 244, 0.1); /*스크롤바 뒷 배경 색상*/
                    }
                }