scrollbars styling
CSS에서 스크롤바의 모양과 색상을 제어할 수 있다.
MDN : CSS scrollbars styling
MDN : scrollbar-width
scrollbar-width:auto // 기본
scrollbar-width:thin // 얇게. 보통 너비의 반정도?
scrollbar-width:none // 스크롤바 숨김. 스크롤은 됨!!
MDN : scrollbar-color
scrollbar-color:{bar-color} {bar-bg-color}
scrollbar-color:auto or initial 등으로 초기화 가능
{bar-color} : transparent 지원 됨!
{bar-bg-color} : transparent 지원 안됨! (크롬에서 알파를 무시하는지 흰색으로 처리됨)
chrome 122 에서 왜인지 모르겠지만 red로 설정시 스크롤버튼이 회색이 되는 버그가 보임
지정 안하면 OS 기본 값
Chrome 121 부터 지원.
::-webkit-scrollbar 와는 별개
모바일 브라우저는 지원 안 함 (스크롤 자체 보이는 방식이 PC 버전과 다름)
기본모양
scrollbar-width:auto
scrollbar-width:thin
scrollbar-width:none (스크롤 됨!)
scrollbar-width:thin
overflow: hidden
스크롤바 없음
ani-scrollbar-width
scrollbar-color:blue red
scrollbar-color:red blue
scrollbar-color:transparent blue
scrollbar-color:red transparent
ani-scrollbar-color