SIR
목록으로

스크롤 바 커스텀 질문입니다. 채택완료

붑후
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전 조회 1,673
답변 1
목록

현재 스크롤 바 를 커스텀 하고있습니다.

.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만 좀 두껍게 하려고하는데 방법이 있을까요?

#그누보드5

답변 1개

채택된 답변
+20 포인트

이건 제가 자주 쓰려고 만들어 논 스크롤바 css 입니다.

 

Copy 
<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;
}

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고