Nasıl oluşturulur: Özel srollbar

CSS kullanarak özel srollbar nasıl oluşturulur öğrendiğinizi öğrenin.

Özel srollbar nasıl oluşturulur

Chrome, Edge, Safari ve Opera, standart dışı ::-webkit-scrollbar Sahte element, tarayıcı srollbar'ının görünümünü değiştirmemizi sağlar.

Aşağıdaki örnek, genişliği 10px olan ve gri kasnak/renkli slaytanı olan koyu gri (#888) srollbar oluşturur:

/* Genişlik */
::-webkit-scrollbar {
  width: 10px;
}
/* Kasnak */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
/* Slaytan */
::-webkit-scrollbar-thumb {
  background: #888;
}
/* Fare tıklanırken slaytan */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

Deneyin

Bu örnek, gölgeli bir srollbar oluşturur:

Örnek

/* Genişlik */
::-webkit-scrollbar {
  width: 20px;
}
/* Kasnak */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}
/* Slaytan */
::-webkit-scrollbar-thumb {
  background: red;
  border-radius: 10px;
}

Deneyin

Srollbar seçici

WebKit tarayıcıları için, aşağıdaki sahte elementleri kullanarak tarayıcı srollbar'ını özelleştirebilirsiniz: