-
CSS / Scollbar custom 스크롤바 커스텀하기Web dev/HTML&CSS 2022. 10. 30. 12:08728x90반응형
브라우저 마다 기본으로 제공되는 스크롤 모양이 다르다.
특히 윈도우는 쫌 못생겼다 ㅋㅋ
1. width,border-radius,border-width로 디자인에 맞게 커스텀 해주면된다.
/* 스크롤 바 커스텀 */ .scrollbar_custom::-webkit-scrollbar {width: 18px;} .scrollbar_custom::-webkit-scrollbar-track {border-radius: 10px;} .scrollbar_custom::-webkit-scrollbar-thumb {background-color: #bcc5db; border-radius: 10px; border: 7px solid #fff; }
2. 스크롤을 적용시킬 박스에 스크롤바 커스텀 클래스를 주고 overflow-y:overlay; 를 넣어준다.
.terms_box{height:120px; overflow-y: overlay; padding: 18px 30px 18px 15px;border: 1px solid #D6DBE1; border-radius: 8px; font-size: 14px; line-height: 24px; margin-bottom: 25px;}
3. html에 넣어준다
<div class="terms_box scrollbar_custom"> 블라블라블라~ </div>
728x90반응형'Web dev > HTML&CSS' 카테고리의 다른 글
CSS / typeit 라이브러리로 html 타이핑 효과 주기 (0) 2023.04.23 CSS / 따라다니는 마우스 포인터 커스텀하기 (0) 2023.04.23 CSS / placeholder 색상바꾸기 (0) 2022.03.13 CSS / 텍스트 줄임 ...처리 (0) 2022.03.13