scrolbarsl-ön-resim

Css ile özel Scrollbars(Kaydırma çubuğu) nasıl yapılır?

Herkese merhabalar. Bu yazımızda kişisel web siteniz için kendinize özel olarak css ile özel scrollbar yani kaydırma çubuğu nasıl yapılır onu anlatacağım. Konuya geçmeden önce scrollbars nedir onu öğrenelim.

Scrollbars nedir?

Küçük bir Türkçe ye çevirme işlemi yaptığımızda scroll kaydırma, bars ise çubuklar anlamına gelmekte. Rastgele bir site açtığınızda sitenin içeriği ekrandan taşması durumunda ekranın sol ve alt tarafında çıkan yapılardır.

web design
Scroll bars kaydırma çubuğu örneği

Şimdi bu yapılar nasıl css ile özelleştirilir onu öğrenelim. Bu scrollbars lara etki etmek için 7 css elementi vardır. ::-webkit-scrollbar , ::-webkit-scrollbar-button , ::-webkit-scrollbar-thumb , ::-webkit-scrollbar-track , ::-webkit-scrollbar-track-piece , ::-webkit-scrollbar-corner ve ::-webkit-resizer dır. Şimdi kısaca bunların tam olarak ne işlevde kullanıldıklarını öğrenelim

::-webkit-scrollbar

Kaydırma çubuklarının(scrollbars) kapladığı alanı tanımlamak için kullanılır. Verilen width değeri ekranın sağ tarafında çıkan scroll un genişlik değerini ayarlar. height ise sayfanın altında çıkan scroll un yükseklik değerini ayarlar. Bu element kullanılmadan diğer 6 element çalışmaz.

::-webkit-scrollbar-button

Kaydırma çubukların başında ve sonunda bulunan scrollbar ı aşağı ve yokarı kaydırmak için kullanılan butonlara etki etmek için kullanılır.

::-webkit-scrollbar-thumb

Kaydırma çubuğunun tutamacının özelliklerine etki etmek için kullanılır.

::-webkit-scrollbar-track

Kaydırma çubuğunda aşağı yukarı kaydırma butonları haricinde kalan kısma etki etmek içim kullanılır.

::-webkit-scrollbar-track-piece

Kaydırma çubuğunda aşağı yukarı kaydırma butonları ve kaydırma çubuğunun tutamacığı haricinde kalan kısma etki etmek içim kullanılır.

::-webkit-scrollbar-corner

İki kardırma çubuğu arasında kalan küçük boşluğa etki etmek için kullanılır.

::-webkit-resizer

İki kardırma çubuğu arasında tekrar boyutlandırma işlevine etki etmek için kullanılır.

Evet şimdi küçük bir örnek işe öğrendiklerimizi pekiştirelim.

Örnek:

<!DOCTYPE html>
<html lang="tr">

<head>
   <meta charset="UTF-8">
   <title>Css ile özel scrollbars yapımı</title>
   <style>
      ::-webkit-scrollbar {
         width: 20px;
         /* Sadece sağ taraftaki scroll a etki eder. */
         height: 20px;
         /* Sedece altta çıkan scroll a etki eder. */
         background: rgb(172, 172, 172);
      }

      ::-webkit-scrollbar-button {
         background: rgba(0, 0, 255, 0.315);
      }

      ::-webkit-scrollbar-thumb {
         background: rgba(255, 0, 0, 0.63);
      }

      ::-webkit-scrollbar-track {
         background: green;
      }

      ::-webkit-scrollbar-corner {
         background: violet;
      }

      ::-webkit-resizer {
         background: pink;
      }

      ::-webkit-scrollbar-track-piece {
         background: yellow;
      }
   </style>
</head>

<body>
   <div style="width: 400px; height: 400px; overflow: scroll; " class="box">
      <div style="width: 500px; height: 2000px;">
         <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque illo ex suscipit cupiditate quia delectus
            odit minima? Repellat soluta quasi minus error eligendi quaerat sed iure nam nulla cumque ratione quia
            aspernatur et, aut excepturi, illo quod eum! Amet aspernatur eum natus laborum sit placeat quas sequi animi
            eligendi odio qui, accusamus, explicabo ipsam, alias quae dolor repudiandae? Neque dignissimos voluptates
            amet quia facilis, alias reiciendis animi dolore blanditiis quae reprehenderit sapiente delectus quaerat
            voluptatem adipisci ex. Officiis, provident dolorum laboriosam ratione repellat voluptatem impedit excepturi
            dolore possimus sint quidem! Vero laudantium asperiores repellendus quod eaque odit ipsum tenetur porro
            fuga, sapiente voluptate et delectus suscipit officiis enim aliquam esse amet hic aut officia ipsam
            consectetur possimus? Consectetur quo libero nostrum iusto sit, unde laboriosam temporibus doloremque
            recusandae autem et veniam laudantium accusantium aut? Cumque, sit iste officia, dolores odio voluptas
            magnam eius nostrum commodi corporis dignissimos voluptates mollitia magni.</p>
         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, odit. Amet doloremque aspernatur quas
            fugiat, temporibus quae voluptates. Vero, placeat! Rem accusamus veniam non iusto, saepe eveniet culpa
            maiores ea quae dignissimos quaerat numquam perspiciatis quas quam! Cum expedita veniam deleniti! Velit
            obcaecati quam delectus deserunt nobis sed fugiat labore.</p>
      </div>
   </div>
</body>

</html>

Çıktısı:

ozel scroll ciktisi
Örneğin çıktısı

Tarayıcı desteği

Evet en önemli konuya geldik. Şu anda bir çok tarayıcıda Webkit eki ile bu özellik çalışıyor fakat. Firefox ve Microsoft explorer da hiç bir şekilde bu özellik çalışmamakta. Ek olarak hiç bir mobil tarayıcıda da çalışmamakta. Daha detaylı bilgi için kaynakçada paylaştığım sitelere bakabilirsiniz.
scrollbars tarayici destegi

Özet

Konuyu özetler isek scrollbars(kaydırma çubuklarını ) kendimize özel olarak ayarlayabiliyoruz fakat henüz web de firefox (microsoft exporer i boş verir.😀) , mobilde ise bir çok tarayıcının desteği bulunmuyor. Bu yüzden özelleştirmek pek mantıklı değil şuan için. Tabi tercih size kalmış. Ben kendi sitem için küçük bir özelleştirme yaptım.

Bu konuda buraya kadarmış bir sonraki blog yazımda görüşmek üzere hoşçakalın. Ha bu arada küçük de olsa bir yorum yaparsanız sevinirim.

Default image
Musa Yazlık
Merhaba. Benim ismim Musa Yazlık. 2017'den beri web yazılım ve web tasarım ile uğraşmaktayım. Buna ek olarak şuanda Eskişehir Osmangazi Üniversitesi Fen-Edebiyat Fakültesi Matematik-Bilgisayar Bilimleri ve Anadolu Üniversitesi Açık Öğretim Fakültesi Yönetim Bilişim Sistemleri olmak üzere çift üniversite okuyan bir üniversite öğrenciyim.

Lütfen bir yorum bırakınız