-
CSS 웹 페이지 스크롤 디자인 수정DEV/css 2023. 11. 16. 09:35
/* 스크롤바 메인 */ .class::-webkit-scrollbar { width: 8px; /* 세로축 스크롤바 폭 너비 */ height: 10px; /* 가로축 스크롤바 폭 너비 */ border-radius: 36px; background-color: white; /* 스크롤바 배경색 */ } /* 외부 스크롤바 */ .class::-webkit-scrollbar-track { opacity: 0; border-radius: 36px; } /* 내부 스크롤바 */ .class::-webkit-scrollbar-thumb { background-color: #ffffff; /* 스크롤바 색상 */ border-radius: 36px; opacity: 0.8; } /* 세로 스크롤 시작 부분 */ .class::-webkit-scrollbar-button:vertical:start:decrement, .class::-webkit-scrollbar-button:vertical:start:increment { display: block; height: 12px; } /* 세로 스크롤 종료 부분 */ .class::-webkit-scrollbar-button:vertical:end:decrement, .class::-webkit-scrollbar-button:vertical:end:increment { display: block; height: 10px; }
'DEV > css' 카테고리의 다른 글
CSS Scroll 제거 (0) 2024.06.21 CSS 심플한 Table CSS 예시 (0) 2023.11.16 CSS 이미지 비율 맞추기, 이미지 사이즈 맞추기 (object-fit) (0) 2022.12.18