| Demo & Code |
[Demo] 스크롤바 엣지있게 꾸미기
#1#2#3#4 스크롤바 테스트 스크롤바 테스트 스크롤바 테스트 스크롤바 테스트 스크롤바 테스트 스크롤바 테스트 스크롤바 테스트 스크롤바 테스트 스크롤바 테스트 스크롤바 테스트 스크롤바 테
dd-stuff.tistory.com
/* CSS */
/* 일괄 적용 */
::-webkit-scrollbar { width:1px }
::-webkit-scrollbar-track { background-color:transparent;}
::-webkit-scrollbar-thumb:vertical {
background:linear-gradient(45deg, transparent, red, transparent)
}
/* 요소마다 다르게 적용 */
/* 페이지 스크롤바 */
html::-webkit-scrollbar { width:6px }
html::-webkit-scrollbar-track { background-color:#fff;}
html::-webkit-scrollbar-thumb:vertical { background-color:#000 }
/* 특정요소의 스크롤바 */
.test::-webkit-scrollbar { width:1px }
.test::-webkit-scrollbar-track { background-color:transparent;}
.test::-webkit-scrollbar-thumb:vertical {
background: linear-gradient(45deg, transparent, red, transparent)
}
