안녕하세요. 오늘은 div의 스크롤을 커스텀 해보겠습니다.
div에 "overflow-y:scroll" 옵션을 주면 세로 스크롤바가 생성됩니다.
기본 모양은 이런 형태인데요
위아래 화살표를 없애고 스크롤 바 뒤 옅은 회색 배경도 없애보겠습니다.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="scrollbar.css">
</head>
<body>
<div class="scroll_box">
<div class="inner_content">내용1</div>
<div class="inner_content">내용2</div>
<div class="inner_content">내용3</div>
<div class="inner_content">내용4</div>
<div class="inner_content">내용5</div>
<div class="inner_content">내용6</div>
<div class="inner_content">내용7</div>
</div>
</body>
</html>
scrollbar.css
.scroll_box {
width: 300px;
height: 150px;
background-color: #ffffff99;
overflow-y: scroll;
}
.inner_content {
height: 25px;
}
.scroll_box::-webkit-scrollbar {
width: 6px;
}
.scroll_box::-webkit-scrollbar-track {
background-color: transparent;
}
.scroll_box::-webkit-scrollbar-thumb {
border-radius: 3px;
background-color: gray;
}
.scroll_box::-webkit-scrollbar-button {
width: 0;
height: 0;
}
결과물
background-color로 색상을 원하는대로 바꿀 수 있습니다.
'HTML／CSS' 카테고리의 다른 글
| [HTML/CSS] 웹 로딩 화면 만들어보기 (0) | 2022.12.09 |
|---|---|
| [HTML/CSS] Drag&Drop 구현해보기 (0) | 2022.11.24 |
| [ HTML / CSS ] 마우스 커서 커스텀하기 (0) | 2022.11.17 |
| [HTML/CSS] 버튼 애니메이션 만들어보기 (0) | 2022.11.09 |
| [HTML / CSS] textarea 커스텀하기 (0) | 2022.11.06 |
