스크롤 바 커스텀 질문입니다.
본문
현재 스크롤 바 를 커스텀 하고있습니다.
.swiper-container1::-webkit-scrollbar {
width: 5px;
height: 10px;
}
.swiper-container1::-webkit-scrollbar-thumb {
background-color: #fff;
border-radius: 10px;
background-clip: padding-box;
border: 2px solid transparent;
}
.swiper-container1::-webkit-scrollbar-track {
background-color: #bce6f7;
border-radius: 10px;
box-shadow: inset 0px 0px 5px white;
}
적용 소스인데요
스크롤바에서 track부분을 얇게 하고 thumb만 좀 두껍게 하려고하는데 방법이 있을까요?
답변 1
이건 제가 자주 쓰려고 만들어 논 스크롤바 css 입니다.
<style>
.swiper-container1 {
width:300px;
height:300px;
padding:10px;
box-sizing:border-box;
border:4px double #cccccc;
outline:none;
}
.swiper-container1::-webkit-scrollbar {
width:12px;
height:12px;
}
.swiper-container1::-webkit-scrollbar-thumb {
background-color:#ffffff;
border-radius:12px;
}
.swiper-container1::-webkit-scrollbar-track {
background-color:#000000;
border-radius:12px;
}
</style>
<textarea class="swiper-container1">
계속 엔터 쳐 보셈
</textarea>
https://wittazzurri.com/editor/html_editor.php 에서 확인해 보세요.
두께 조절은 아래의 12 를 원하는 수치로요.
.swiper-container1::-webkit-scrollbar {
width:12px;
height:12px;
}
답변을 작성하시기 전에 로그인 해주세요.
