Sådan oprettes: Tilpasset kugletrækker

Lær hvordan du bruger CSS til at oprette en tilpasset kugletrækker.

Sådan oprettes en tilpasset kugletrækker

Chrome, Edge, Safari og Opera understøtter ikke-standard ::-webkit-scrollbar Pseudoelement, der giver os mulighed for at ændre browserens kugletrækkerudseende.

I det følgende eksempel oprettes en kugletrækker med en bredde på 10px, som har en grå spor/farve og en mørkegrå (#888) skive:

/* Bredder */
::-webkit-scrollbar {
  width: 10px;
}
/* Spor */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
/* Skive */
::-webkit-scrollbar-thumb {
  background: #888;
}
/* Skive ved musepeksling */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

Prøv det selv

Dette eksempel opretter en kugletrækker med skyggeeffekt:

Eksempel

/* Bredder */
::-webkit-scrollbar {
  width: 20px;
}
/* Spor */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}
/* Skive */
::-webkit-scrollbar-thumb {
  background: red;
  border-radius: 10px;
}

Prøv det selv

Kugletrækkerselektør

For webkit-browsere kan du bruge følgende pseudoelementer til at tilpasse browserens kugletrækker: