[scroll] CSS - scrollbar-width 속성 - 스크롤바 너비 (= scrollbar-width속성 = 스크롤바위드스속성)

1. scrollbar-width 예제 - 스크롤바 너비
2. scrollbar-width 정의
3. scrollbar-width 구문

scrollbar-width 예제 - 스크롤바 너비

 

<style>

.hz {

  width: 300px;

  height: 100px;

  overflow-y: scroll;

  scrollbar-width: thin;

}

</style>    

<div class="hz">

  홈짱닷컴 Homzzang.com 홈페이지 제작관리 배우기<BR>

  HTML CSS JavaScript jQuery   PHP SQL 등<BR>

  그누보드5 영카트5 아미나 나리야 배추빌더 등 설치 세팅 커스텀 튜닝 배우기

</div>

 

결과보기

scrollbar-width 정의

 

스크롤바 너비 지정.

 

---

 

1. 

• 스크롤바 차지 공간 최적화가 목적이며, 스크롤바 미적 효과와는 무관.
• none 속성 경우 접근성에 부정적 영향 미치므로 비사용 권장.
• 사용자가 직접 스크롤 제어 곤란하고 오직 프로그램 통해서만 제어 가능 시  scrollbar-width: none 속성 대신 overflow 속성의 hidden 속성값 사용 권장.

 

2

• 기본값: auto
• 적용대상: 스크롤 박스
• 상속여부: X
• 계산된값: 명시된 대로
• 애니유형: 불연속

 

3.

주요 최신 브라우저 모두 지원. 

 

4. MDN scrollbar-width 예제 보기
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/scrollbar-width

 

scrollbar-width 구문

 

selector {scrollbar-width: auto | thin | none | inherit | initial | revert | revert-layer | unset;}

 

---

[속성값]

 

auto

해당 플랫폼의 기본값 사용.

thin

해당 플랫폼의 기본값보다 더 얇게 표시

none

스크롤바는 표시 안 되지만 해당 요소는 여전히 스크롤 가능.

 

PS. 나머지 속성은 전역속성값임.