Hur man skapar: Anpassade skrollrullar

Lär dig hur du använder CSS för att skapa anpassade skrollrullar.

Hur man skapar anpassade skrollrullar

Chrome, Edge, Safari och Opera stöder ostandardiserade ::-webkit-scrollbar Pseudoelement som tillåter oss att ändra webbläsarens skrollrullars utseende.

I nästa exempel skapas en skrollrulle med en bredd på 10px, som har en grå bana/färg och en mörkgrå (#888) skjutreglage:

/* Bredd */
::-webkit-scrollbar {
  width: 10px;
}
/* Bana */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
/* Skjutreglage */
::-webkit-scrollbar-thumb {
  background: #888;
}
/* Skjutreglage vid musöverläggning */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

Prova det själv

Detta exempel skapar en skrollrulle med skuggverkande effekt:

Exempel

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

Prova det själv

Skrollrullväljare

För webkit-webbläsare kan du använda följande pseudoelement för att anpassa webbläsarens skrollrulle: