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

붑후 2년 전 조회 1,495

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

.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 포인트

비타주리

2년 전

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

</p>

<p><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></p>

<p>

https://wittazzurri.com/editor/html_editor.php 에서 확인해 보세요.

두께 조절은 아래의 12 를 원하는 수치로요.

.swiper-container1::-webkit-scrollbar {
width:12px;
height:12px;
}

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

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

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

로그인

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

답변 1개

공유하기