[scroll] CSS - scrollbar-color 속성 - 스크롤바 색상 지정 (= scrollbar-color속성 = 스크롤바컬러속성) ※ 스크롤바 색깔

1. scrollbar-color 예제 - 스크롤바 색상
2. scrollbar-color 정의
3. scrollbar-color 구문

scrollbar-color 예제 - 스크롤바 색상

 

<style>

div.scroller {

  width: 200px;

  height: 100px;

  overflow-y: scroll;

  scrollbar-color: pink lightblue;

}

</style>

<div class="scroller">

  <h2>홈짱닷컴 Homzzang.com</h2>

  <p>홈페이지 제작관리 강의 (코딩언어/그누보드/영카트)

</div>

 

결과보기

scrollbar-color 정의

 

스크롤바 색상 지정.

 

---

 

1. cf.

• overflow 속성 - 콘텐츠가 영역 넘을 때, 스크롤바 (가로/세로) 지정.
• overflow-x 속성 - 콘텐츠가 영역 넘을 때, 스크롤바 가로 지정
• overflow-y 속성 - 콘텐츠가 영역 넘을 때, 스크롤바 세로 지정.
• 그외 스크롤 관련 여러 속성들

 

2.

• 기본값: auto
• 상속여부: O
• 애니가능: X
• CSS버전: CSS Scrollbars Styling Module Level 1
• JS구문: object.style.scrollbarColor="red blue";

 

3.

Chrome(121+)과 Firefox 최신 브라우저만 지원.

 

4. MDN scrollbar-color 예제보기

https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color

 

scrollbar-color 구문

 

selector {scrollbar-color: auto|thumbColor trackColor|initial|inherit;}

 

---

 

auto

브라우저 자동 지정.

 

thumbColor trackColor

스크롤바 (막대색/트랙색)을 띄어쓰기로 구분해 각각 지정.

 

initial

이 속성의 기본값 사용.

 

inherit

부모요소의 속성값 상속.