Kung paano gumawa: Custom scrollbar
Matututunan kung paano gumawa ng custom scrollbar gamit ang CSS.
Custom scrollbar
Babala:Ang Firefox o ang mga bersyon ng Edge bago ang 79 ay hindi sumusuporta sa custom scrollbar.
Kung paano gumawa ng custom scrollbar
Chrome, Edge, Safari at Opera ay sumusuporta sa hindi standar na ::-webkit-scrollbar
Ang pseudo-elemento na nagbibigay ng kapangyarihan sa amin na baguhin ang hitsura ng scrollbar ng browser.
Ang ibang halimbawa na ito ay gumawa ng scrollbar ng 10px na may grey na track/grey na slider at dark grey (#888) na slider:
/* Width */ ::-webkit-scrollbar { width: 10px; } /* Track */ ::-webkit-scrollbar-track { background: #f1f1f1; } /* Slider */ ::-webkit-scrollbar-thumb { background: #888; } /* Slider when hovered */ ::-webkit-scrollbar-thumb:hover { background: #555; }
Ang halimbawa na ito ay gumawa ng scrollbar na may epekto ng shadow:
Mga halimbawa
/* Width */ ::-webkit-scrollbar { width: 20px; } /* Track */ ::-webkit-scrollbar-track { box-shadow: inset 0 0 5px grey; border-radius: 10px; } /* Slider */ ::-webkit-scrollbar-thumb { background: red; border-radius: 10px; }
Selector ng scrollbar
Para sa mga webkit na browser, maaari mong gamitin ang mga pseudo-elemento na ito upang ayusin ang scrollbar ng browser:
::-webkit-scrollbar |
Ang scrollbar mismo. |
::-webkit-scrollbar-button |
Ang pindutan sa scrollbar (punta at pata sa itaas at sa ibaba). |
::-webkit-scrollbar-thumb |
Ang puwersang ililipat na scrollbar. |
::-webkit-scrollbar-track |
Ang track ng scrollbar (progress bar). |
::-webkit-scrollbar-track-piece |
Ang bahagi ng track (progress bar) na hindi napapalibutan ng slider. |
::-webkit-scrollbar-corner |
Ang sulok ng scrollbar, ang horizontal at vertical na scrollbar ay nagkakaliputput dito. |
::-webkit-resizer |
出现在某些元素底角的可拖动调整大小手柄。 |