본문 바로가기
Development/CSS | SCSS | SASS

CSS 스크롤바 (Custom)

by Dev. Jkun 2021. 6. 8.
반응형

스크롤바에도 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>
반응형

'Development > CSS | SCSS | SASS' 카테고리의 다른 글

TailwindCSS SVG Icon 사이트 모음  (0) 2024.01.11
[Tailwindcss] 클래스 그룹화  (0) 2023.10.18
css pinch zoom  (0) 2018.08.28
IE 10 이상으로 셀렉트박스 아이콘 숨기기  (0) 2015.05.08
inline-block 여백 제거  (0) 2013.12.17

댓글