::-webkit-scrollbar ile Kaydırma Çubuğu Biçimlendirme
webkit sözde ögelerini ve scrollbar-color özelliğini kullanarak kaydırma çubuğunun görünümünü özelleştirin.
::-webkit-scrollbar ile Kaydırma Çubuğu Biçimlendirme, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.
Kaydırma Çubuğu Biçimlendirmesine Genel Bakış
Tarayıcılar, işletim sistemlerine göre farklılık gösteren varsayılan kaydırma çubukları oluşturur. CSS, standart dışı WebKit sözde öğelerini ve modern standart özellikleri kullanarak kaydırma çubuğu görünümünü özelleştirmenize olanak tanır.
::-webkit-scrollbar
Tüm kaydırma çubuğunun kök sözde öğesidir. Genişliğini (dikey) ve yüksekliğini (yatay) ayarlayın:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>::-webkit-scrollbar-track
İz, tutamacın boyunca kaydığı arka plan kanalıdır:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>::-webkit-scrollbar-thumb
Tutamaç, sürüklenebilen kaydırma göstergesidir:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>Eksiksiz Özel Kaydırma Çubuğu
Eksiksiz bir özel kaydırma çubuğu uygulaması:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>Modern Standart: scrollbar-color
scrollbar-color, Firefox tarafından desteklenen standartlaştırılmış özelliktir. Tek bildirimde tutamaç ve iz renklerini ayarlar:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>Modern Standart: scrollbar-width
scrollbar-width, anahtar sözcük değerleriyle kaydırma çubuğu boyutunu denetler:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>Tarayıcılar Arası Kaydırma Çubuğu Biçimlendirmesi
Tam tarayıcılar arası kapsam için her iki yaklaşımı da kullanın:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>Kaydırmayı Koruyarak Kaydırma Çubuklarını Gizleme
Bir öğeyi kaydırılabilir hâle getirirken kaydırma çubuğunu görsel olarak gizleyin:
<div class="hide-scrollbar">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>Koyu Mod Kaydırma Çubukları
Özel biçimlendirme yapmadan işletim sisteminin yerel koyu kaydırma çubuklarını elde etmek için CSS color-scheme özelliğini kullanın:
<p>Uses OS-native scrollbar theme via <code>color-scheme</code>.</p>Erişilebilirlik Hatırlatması
Kaydırma çubuklarını, keşfedilmelerini zorlaştıracak kadar küçük veya görünmez hâle getirmeyin. Gizli kaydırma çubukları dokunma öncelikli tasarımlar için kabul edilebilir, ancak masaüstünde kafa karıştırıcı olabilir.
Hızlı Kontrol
Hangi standartlaştırılmış CSS özelliği kaydırma çubuğu renklerini ayarlar ve Firefox tarafından desteklenir?
Özet
Kaydırma çubuklarını ::-webkit-scrollbar sözde öğeleri (WebKit) ve standart scrollbar-color/scrollbar-width özellikleri (Firefox/modern tarayıcılar) ile özelleştirin. Tarayıcılar arası tam destek için her iki yaklaşımı da kullanın. Kaydırma işlevini korurken kaydırma çubuklarını gizlemek için scrollbar-width: none ile WebKit eşdeğerini birlikte kullanın.
Sıkça Sorulan Sorular
“::-webkit-scrollbar ile Kaydırma Çubuğu Biçimlendirme” dersi ücretsiz mi?
Evet — “::-webkit-scrollbar ile Kaydırma Çubuğu Biçimlendirme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.
“::-webkit-scrollbar ile Kaydırma Çubuğu Biçimlendirme” dersinde ne öğreneceğim?
webkit sözde ögelerini ve scrollbar-color özelliğini kullanarak kaydırma çubuğunun görünümünü özelleştirin. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
CSS Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“::-webkit-scrollbar ile Kaydırma Çubuğu Biçimlendirme” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- overflow: hidden scroll auto clip
- scroll-behavior: smooth
- scroll-snap-type ve scroll-snap-align
- ::-webkit-scrollbar ile Kaydırma Çubuğu Biçimlendirme