본문 바로가기
css

사용자 지정 스크롤 막대로 자신의 물건 자랑하기

by code-box 2021. 12. 29.
반응형

초라한 쇠스랑에 숨이 멎는 순간은 바로 이 현장에서였다. CSS-Tricks v17이 FAT CHONKY BOI와 함께 출시되었을 때, 나는 입이 딱 벌어졌다.

body::-webkit-scrollbar {
    /* required - the "base" of the bar - mostly for setting width */
}

body::-webkit-scrollbar-track {
    /* the "track" of the bar - great for customizing "background" colors */
}

body::-webkit-scrollbar-thumb {
    /* the actual draggable element, the star of the show! */
}
body::-webkit-scrollbar {
    /* required - the "base" of the bar - mostly for setting width */
}

body::-webkit-scrollbar-track {
    /* the "track" of the bar - great for customizing "background" colors */
}

body::-webkit-scrollbar-thumb {
    /* the actual draggable element, the star of the show! */
}
From here, it works like any other selected element, so bring your full bag of single div CSS tricks! Media queries work! Background gradients work! Transparency works! Margins with all manner of CSS units work! (Not everything works… I’d love to style `cursor` on my scrollbars for that authentic GeoCities look). I tried it out on my site with Lea Verou’s stash of CSS background gradients (my stash of stashes is here) and ended up with an atrocious combo of stripy barber pole () for the thumb element and transparent hearts for the track. But it was most definitely mine—so much so that people have taken to calling it the “swyxbar” when I implemented a subtler version at work.
 

모든 프런트 엔드 개발자들은 적어도 한 번은 이것을 너무 멀리 가져가야 합니다.
위험하게 살아라!
규칙을 어겨라!
사용자 에이전트에 대한 분노!
그리고 사용자의 기대를 저버리는 스크롤 바를 대중 시장 제품(과거 Google Wave가 그랬던 것처럼)에 출하하지 마십시오!

댓글