Nasıl Yapılır - Özel Kaydırma Çubuğu
CSS ile özel bir kaydırma çubuğunun nasıl oluşturulacağını öğrenin.
Özel Kaydırma Çubukları
Not: Özel kaydırma çubukları, Firefox veya Edge, önceki sürüm 79'da desteklenmez.
Özel Kaydırma Çubukları Nasıl Oluşturulur
::-webkit-scrollbar
Chrome, Edge, Safari ve Opera , tarayıcının kaydırma çubuğunun görünümünü değiştirmemize izin veren standart olmayan sözde öğeyi destekler .
Aşağıdaki örnek, gri iz/çubuk rengine ve koyu gri (#888) tutamacı olan ince (10 piksel genişliğinde) bir kaydırma çubuğu oluşturur:
Örnek
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
Bu örnek, kutu gölgeli bir kaydırma çubuğu oluşturur:
Örnek
/* width */
::-webkit-scrollbar {
width: 20px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px
grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: red;
border-radius: 10px;
}
Kaydırma çubuğu Seçiciler
Webkit tarayıcıları için, tarayıcının kaydırma çubuğunu özelleştirmek için aşağıdaki sözde öğeleri kullanabilirsiniz:
::-webkit-scrollbar
kaydırma çubuğu.::-webkit-scrollbar-button
kaydırma çubuğundaki düğmeler (yukarı ve aşağıyı gösteren oklar).::-webkit-scrollbar-thumb
sürüklenebilir kaydırma tutamacı.::-webkit-scrollbar-track
kaydırma çubuğunun izi (ilerleme çubuğu).::-webkit-scrollbar-track-piece
iz (ilerleme çubuğu) tutamaç tarafından KAPLANMAMIŞTIR.::-webkit-scrollbar-corner
hem yatay hem de dikey kaydırma çubuklarının buluştuğu kaydırma çubuğunun alt köşesi.::-webkit-resizer
bazı öğelerin alt köşesinde görünen sürüklenebilir yeniden boyutlandırma tutamacı.