728x90
π μ€ν¬λ‘€λ° μ€νμΌ μ»€μ€ν (Scrollbar Style Custom)
μ€ν¬λ‘€λ° μ€νμΌμ λν μΉνμ€μ μ‘΄μ¬νμ§ μμ΅λλ€.
webkit λΈλΌμ°μ (ν¬λ‘¬, μ€νλΌ, μ¬ν리)μ νν΄μκ°μμμ
λ₯Ό μ¬μ©νμ¬ μ»€μ€ν μ ν΄μ€λλ€.
μ€ν¬λ‘€λ°μ κ΄λ ¨λ κ°μμμλ μ¬λ¬κ°μ§κ° μμ§λ§ μ£Όλ‘ μ¬μ©νλ μλ 3κ°μ§κ° μμ΅λλ€.
- ::-webkit-scrollbar : μ€ν¬λ‘€λ° μ 체 μμμ λν μ€μ
- ::-webkit-scrollbar-thumb : μ€ν¬λ‘€λ° λ§λμ λν μ€μ
- ::-webkit-scrollbar-track : μ€ν¬λ‘€λ° λ· λ°°κ²½μ λν μ€μ
κ° μ€ν¬λ‘€ μμ μ 체, λ§λ(thumb), μ¬λ°±(track)μ λ»ν©λλ€.
μμ±λ μ½λλ‘ νμΈν΄λ³΄κ² μ΅λλ€.
νμ¬ μ ν°μ€ν 리μ μ μ©λμ΄μλ μ½λμ
λλ€.
body::-webkit-scrollbar {
width: 10px; /* μΈλ‘μΆ μ€ν¬λ‘€λ° κΈΈμ΄ */
height: 20px; /* κ°λ‘μΆ μ€ν¬λ‘€λ° κΈΈμ΄ */
}
body::-webkit-scrollbar-track {
background-color: white; /*μ€ν¬λ‘€ λ° λ°°κ²½ μμ*/
}
body::-webkit-scrollbar-thumb {
border-radius: 8px;
background-color: #6667AB; /*μ€ν¬λ‘€ λ° μμ*/
}
body μ μ²΄κ° μλλΌ νΉμ μμ
μ μ§μ ν΄μ μ¬μ©ν μ μμ΅λλ€.
νΉμ μμ::μ½λ λ‘ μμ±νκ² λλ©΄ μ§μ λ νΉμ μμμ μ€ν¬λ‘€λ° 컀μ€ν
μ΄ κ°λ₯ν©λλ€.
728x90