<div class="scrollBar">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br>
</div>
/* 임의의 영역 생성 */
.scrollBar {
width: 200px;
height: 200px;
overflow-y: scroll;
}
/* 아래의 모든 코드는 영역::코드로 사용 */
.scrollBar::scrollbar {
width: 10px; /* 스크롤바의 너비 */
}
.scrollBar::scrollbar-thumb {
height: 30%; /* 스크롤바의 길이 */
background: #217af4; /* 스크롤바의 색상 */
border-radius: 10px;
}
.scrollBar::scrollbar-track {
background: rgba(33, 122, 244, .1); /*스크롤바 뒷 배경 색상*/
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.