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;
}

Subukan ito personal na.

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;
}

Subukan ito personal na.

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 出现在某些元素底角的可拖动调整大小手柄。