CSS 스크롤바 (Custom)

스크롤바에도 CSS 속성을 부여할 수가 있다.

현재 디버깅용으로 데이터 확인하기 위해 엘리먼트만들었는데.. 디버깅용이라 해도 이뻤으면 좋게엤다~

CSS 코드

/* Debugging Element */
[data-storage] { opacity:0; position:fixed; right:-9999999px; top:-9999999px; z-index:9999999 }
[data-storage][debug] { opacity:.8; right:10px !important; top:10px !important; width:200px; height:200px; overflow:auto; background-color:rgab(15,82,144,.54) !important; color:#fff !important; padding:10px; }
[data-storage][debug]::-webkit-scrollbar { width:10px; background-color:rgba(19,95,179,.91); }
[data-storage][debug]::-webkit-scrollbar-thumb { background-color:#2f3542; border-radius:10px; box-shadow:inset 0 0 5px white; }
[data-storage][debug]::-webkit-scrollbar-track { background-color:grey; border-radius:10px; box-shadow:inset 0 0 5px white; } }

HTML 코드 (별거없겠지요?)

<div data-storage="memberInfo" debug></div>