Bir web sitesi geliştirdiniz. Tasarımını tamamladınız, renkleri ayarladınız, animasyonları eklediniz ve sonunda istediğiniz görünümü elde ettiniz.

Ama sağ tarafta küçük bir detay dikkatinizi çekiyor: Tarayıcının varsayılan kaydırma çubuğu, yani scrollbar.

Özellikle sade tasarımlarda bu çubuk bazen sitenin geri kalanıyla hiç uyuşmayabiliyor.

Peki scrollbar'ın da rengini, genişliğini ve görünümünü kendi tasarımımıza göre değiştirebileceğimizi biliyor muydunuz?

Üstelik bunun için ekstra bir kütüphane kullanmamız gerekmiyor. Birkaç satır CSS yeterli olabiliyor.

Bu yazıda scrollbar'ın nasıl çalıştığına, hangi CSS özelliklerini kullanabileceğimize ve farklı tasarımlara nasıl uyarlayabileceğimize bakacağız.

Scrollbar Tam Olarak Nedir?

Scrollbar, sayfanın kaydırılabilir olduğunu gösteren ve içerikler arasında hareket etmemizi sağlayan tarayıcı arayüzünün bir parçası.

Temelde iki önemli bölümü var:

  • Track: Kaydırma çubuğunun üzerinde hareket ettiği arka plan.
  • Thumb: Sayfayı kaydırdığımızda hareket eden parça.

Bizim CSS ile değiştirmeye çalıştığımız görünüm de büyük ölçüde bu iki bölümden oluşuyor.

Burada önemli bir ayrım var. Scrollbar'ı özelleştirmek için iki farklı CSS yaklaşımı kullanabiliyoruz. Biri standart özellikler, diğeri ise daha ayrıntılı değişikliklere izin veren tarayıcıya özgü seçiciler.

İlk Olarak Scrollbar'ın Rengini Değiştirelim

En basit yöntemle başlayalım.

CSS tarafında scrollbar-color özelliğiyle kaydırma çubuğunun rengini değiştirebiliyoruz.

Örneğin:

html {
  scrollbar-color: #ef3926 #f8f6f2;
}

Burada iki farklı renk kullandık.

İlk değer olan #ef3926, hareket eden parçanın yani thumb'ın rengini belirliyor.

İkinci değer olan #f8f6f2 ise scrollbar'ın arka planı.

Ben burada örnek olarak kırmızı ve kırık beyaz tonlarını seçtim. Siz kendi sitenizin renklerine göre değiştirebilirsiniz.

Peki scrollbar'ın kalınlığını da değiştirmek istersek?

html {
  scrollbar-color: #ef3926 #f8f6f2;
  scrollbar-width: thin;
}

scrollbar-width özelliğine thin değerini verdiğimizde tarayıcıdan daha ince bir kaydırma çubuğu göstermesini istiyoruz.

Ancak burada doğrudan 8px gibi bir ölçü veremiyoruz. Standart CSS bu özellik için auto, thin ve none değerlerini destekliyor.

Yani scrollbar'ın ne kadar ince görüneceği tarayıcıya ve işletim sistemine göre değişebilir.

Daha Fazla Özelleştirme Yapabilir miyiz?

Şimdi biraz daha farklı bir görünüm hazırlayalım.

Diyelim ki scrollbar tam olarak 8 piksel genişliğinde olsun, köşeleri yuvarlatılsın ve üzerine geldiğimizde rengi değişsin istiyoruz.

Bunun için ::-webkit-scrollbar seçicilerini kullanabiliriz.

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f8f6f2;
}

::-webkit-scrollbar-thumb {
  background: #ef3926;
  border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
  background: #c92d1d;
}

Burada yaptığımız işlemler oldukça basit.

Önce scrollbar'ın genişliğini belirledik. Ardından arka planına açık bir renk verdik ve hareket eden parçayı kırmızı yaptık.

border-radius ile köşeleri yuvarlattık.

Son olarak :hover kullanarak fareyle scrollbar'ın üzerine geldiğimizde renginin koyulaşmasını sağladık.

Ancak bu seçiciler standart CSS'in bir parçası değil. Dolayısıyla her tarayıcıda aynı şekilde çalışacağını düşünmemek gerekiyor.

Bir de önemli bir ayrıntı var: scrollbar-color veya scrollbar-width özellikleri auto dışında bir değer aldığında, bunları destekleyen tarayıcılar özel ::-webkit-scrollbar stillerini geçersiz kılabiliyor.

Bu yüzden iki yöntemi aynı yerde kullanırken hangi stillerin uygulanacağını kontrol etmek gerekiyor.

Farklı Tasarımlar İçin Farklı Scrollbar'lar

Bence scrollbar'ı özelleştirmenin en güzel tarafı, hazırladığımız sitenin tasarımına göre küçük değişiklikler yapabilmek.

Örneğin üç farklı web sitesi düşünelim.

1. Sade ve Açık Renkli Bir Site

Açık renkli bir portföy sitesinde varsayılan koyu scrollbar yerine daha hafif bir görünüm tercih edebiliriz.

html {
  scrollbar-color: #aaa9a5 #f5f3f0;
  scrollbar-width: thin;
}

Burada dikkat çekici bir renk yerine, sayfanın arka planıyla uyumlu gri tonları kullandık.

2. Koyu Temalı Bir Site

Koyu arka plana sahip bir web sitesinde aynı renkleri kullanmak pek mantıklı olmayabilir.

html {
  scrollbar-color: #777777 #1c1c1c;
  scrollbar-width: thin;
}

Bu örnekte açık gri thumb ile koyu arka plan arasında yeterli bir ayrım oluşturmaya çalışıyoruz.

3. Marka Rengini Kullanan Bir Site

Bazen scrollbar'ın tamamen arka plana karışmasını değil, sitenin genel renklerini taşımasını isteyebiliriz.

html {
  scrollbar-color: #ef3926 #f8f6f2;
  scrollbar-width: thin;
}

Burada kullandığım kırmızı, Coffee Kangoo için hazırladığım konsept tasarımdaki renklerden biri.

Tabii her projede marka rengini scrollbar'a uygulamak zorunda değiliz.

Bana göre önemli olan, scrollbar'ın sayfanın geri kalanından kopuk görünmemesi.

Scrollbar'ı Tamamen Gizlemek Mantıklı mı?

Bir başka yöntem de scrollbar'ı tamamen gizlemek.

Bunun için şöyle bir CSS kullanabiliyoruz:

html {
  scrollbar-width: none;
}

Bu özellik scrollbar'ı gizlerken kaydırma davranışını koruyabiliyor.

Ancak ben bunu normal bir web sitesinde ilk çözüm olarak tercih etmezdim.

Çünkü scrollbar yalnızca görsel bir detay değil. Kullanıcıya sayfanın devam ettiğini gösteriyor ve fareyle sürüklenerek de kullanılabiliyor.

Özellikle uzun sayfalarda veya içerik alanlarında bu önemli olabilir.

Sadece daha temiz bir görüntü elde etmek için scrollbar'ı gizlemek, bazı kullanıcıların sayfada gezinmesini zorlaştırabilir.

Bu nedenle tamamen gizlemek yerine tasarıma uygun hale getirmek bana daha mantıklı geliyor.

Peki Her Tarayıcıda Aynı Görünecek mi?

Hayır, bunu garanti edemiyoruz.

Scrollbar'ın görünümü tarayıcıya, işletim sistemine ve kullanıcının ayarlarına göre farklılık gösterebilir.

Örneğin bazı sistemlerde scrollbar sürekli görünürken bazılarında yalnızca kaydırma sırasında ortaya çıkabiliyor.

Aynı şekilde standart scrollbar-color ve scrollbar-width özellikleriyle hazırladığımız görünüm, ::-webkit-scrollbar seçicileriyle hazırladığımız görünümle birebir aynı olmak zorunda değil.

Bu nedenle scrollbar tasarımını değiştirdikten sonra yalnızca kendi kullandığımız tarayıcıda değil, farklı tarayıcılarda da kontrol etmekte fayda var.

Benim için burada önemli olan, her kullanıcıya piksel piksel aynı scrollbar'ı göstermekten çok, desteklenen tarayıcılarda tutarlı ve kullanılabilir bir görünüm sağlamak.

Sonuç

Web sitesi geliştirirken genellikle büyük bölümlere odaklanıyoruz.

Header nasıl görünüyor, hero alanındaki animasyonlar düzgün çalışıyor mu, görseller doğru yerleşmiş mi?

Bunların hepsi önemli.

Ama bazen sitenin genel görünümünü etkileyen şey sağ taraftaki küçücük bir kaydırma çubuğu olabiliyor.

Scrollbar'ı her projede özelleştirmek zorunda değiliz. Tarayıcının varsayılan görünümü tasarıma uyuyorsa olduğu gibi bırakmak da gayet mantıklı.

Ancak tasarımla uyuşmuyorsa, birkaç satır CSS ile bu detayı da düzenleyebiliriz.

Bence web geliştirme sürecinde önemli olan yalnızca büyük bölümleri tamamlamak değil, gerektiğinde bu küçük ayrıntıları da düşünmek.