Çabuk İpucu: Tarayıcı kaydırma çubuklarını UI Tasarımlarınızla Uyumlu Hale Getirin

() translation by (you can also view the original English article)

Bu ipucu, UI tasarımınızla uyumlu olacak şekilde kaydırma çubuklarının görünümünü ve görünümünü iyileştirmenizi sağlıyacaktır. WebKit tarayıcılarının CSS konusunda ne sunduklarına bir göz atacağız, ayrıca diğer tarayıcılarada hitap etmek için yedek olarak jQuery kullanacağız.

Kısayol mu arıyorsunuz?

Web sitenizin belirli bir bileşenine stil uygulamakla ilgili yardıma ihtiyacınız varsa, profesyonellerden yardım almak daha hızlı olabilir. Envato, her çeşit web bileşenini yeniden stillendirmek veya özelleştirmek konusunda uzmanlara sahiptir.

Tarayıcılar Hakkında Hızlı Not

Webkit tabanlı tarayıcılar dediğimizde aslında Apple Safari ve Google Chrome'dan bahsediyoruz. Şu anda, genel masaüstü tarayıcı pazarının% 40'ından fazlasını elinde tutuyorlar. Tabletler için, Apple'ın iPad'i hangi şirketin tarayıcısı kullanıldığına bakılmaksızın Webkit'i kullanacaktır. Google'da Android işletim sistemine Chrome'u ekledi ve Chromebook'larda tabii ki Google Chrome'u temel alıyor.

Bu rakamlara baktığımızda, kaydırma çubuğu stilleme için çok parlak bir gelecek gözüküyor!

1. Adım: Kaydırma çubuklu Basit Bir Sayfa

CSS ile kaydırma çubuklarını stillendirmeye başlamadan önce önce çalışan bir demoya ihtiyacımız var; Kaydırma çubuklu bir sayfa. Kaydırma çubukları şu durumlarda görülebilir:

İçeriğin görünür pencere alanından büyük olması (sağda bir kaydırma çubuğu görünecektir).
textarea'nın kaydırma çubuklarının görünmesi için yeterli miktarda metin içeriyor olması.
Farklı bir sayfa görüntülemek için kullanılan bir iframe.
overflow özelliği belirlenmiş bir div veya başka bir blok öğesi

Bu demo için son seçeneği kullanacağiz. İşte benim başlangıç markup'ım:

<div class="container">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus tortor eget orci fringilla non semper magna aliquet. Aliquam convallis elit sem. Proin fringilla fermentum pretium. Phasellus id nisl eu eros convallis eleifend. In hac habitasse platea dictumst. In at felis massa. Maecenas vitae quam non elit porta pellentesque ac in erat. Nullam a ante felis, ullamcorper suscipit felis. Maecenas sit amet nisl mattis ipsum ullamcorper aliquam vitae sed sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>

    <p>Sed sed tellus dolor, non lobortis felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In eget nisl viverra risus feugiat vulputate tempus et leo. Nam metus nibh, tristique non sodales non, interdum et neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet aliquet vestibulum. Curabitur viverra tortor augue, a aliquet tellus. Vivamus eu felis vel lorem tincidunt imperdiet. Fusce iaculis luctus convallis. Proin adipiscing malesuada enim, et feugiat tortor sagittis eu. Cras convallis felis eu leo tempus et fermentum urna accumsan. In quis metus at metus ultricies fringilla. Maecenas sed lacus aliquam nibh semper dignissim et quis est.</p>
    
    <p>Praesent sodales, sapien sit amet congue egestas, sem ligula ornare massa, vitae suscipit felis ligula quis velit. Phasellus lectus massa, sodales ac vulputate ac, pharetra quis lacus. Morbi tempus pretium nisi sed pretium. Pellentesque dictum volutpat vulputate. Fusce dapibus sagittis felis, ut consequat nisi posuere id. Cras elit orci, vehicula in sagittis a, faucibus vitae dui. Nunc non lorem in metus adipiscing adipiscing non a sapien. Sed dictum ultrices nibh in tristique. Nulla dapibus laoreet tincidunt. Sed accumsan erat quis mi luctus porta.</p>

    <p>Sed mollis justo enim, ut pharetra nunc. Fusce vehicula viverra magna, et fringilla lectus porta quis. Donec eu fermentum mi. Donec congue pellentesque iaculis. Phasellus est leo, cursus eget consectetur in, tristique sit amet tortor. Cras eleifend felis sit amet eros vehicula aliquet. Pellentesque fringilla metus in libero luctus eu condimentum nulla pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consequat sodales lorem, nec dignissim turpis pharetra et. Nullam commodo hendrerit elementum. Donec porta faucibus ligula non blandit. In ultrices vehicula pretium.</p>

    <p>Sed ac sagittis sapien. Curabitur varius pellentesque nunc eget molestie. Vivamus in massa arcu, ut auctor tellus. Aliquam convallis lobortis magna, ut posuere odio euismod ac. Vestibulum in enim vitae metus vulputate interdum. Mauris a risus auctor nunc fermentum dapibus. Proin iaculis, nunc ut viverra varius, augue augue porta libero, id viverra nisl elit in mauris. Aenean quis risus ante. Donec bibendum erat a sem vestibulum eu aliquet lectus tincidunt. Vivamus imperdiet congue leo, non ultricies urna sodales sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla vitae rhoncus dui. Nunc in nisi in ante imperdiet tincidunt sagittis eu ipsum. Aenean orci justo, faucibus placerat tincidunt vitae, vehicula at libero.</p>

</div>

Sadece çok miktarda anlamsız içeriğe sahip bir div ve bazı sabit boyutları ayarlayan ve yatay ve dikey kaydırma çubuklarını tetikleyen başlangıç CSS'i:

  .container {
		  width: 400px;
		  height: 300px;
		  background-color: #DCDCDC;
		  overflow: scroll; /* showing scrollbars */
	}

Buna benzer bir şey görüyor olmanız lazım:

2. Adım: Webkit Tarayıcıları ile Başlangıç

Yıllar önce(birkaç yıl) Webkit tarayıcılarına, sayfalarınızı temanıza göre şekillendirebilmek için kaydırma çubuklarını hedefleyen CSS Pseudo Öğeler'i eklendi.

-webkit- önekini ve webkit'in özel kaydırma çubuğu özelliklerini kullanarak bir şeyler stilleyelim. Unutmayın ki, anlama kolaylığı için temel CSS özelliklerine bağlı kaldım ve kod yorumlarında gerekli anlatımı yaptım.

1	::-webkit-scrollbar {
2	width: 15px;
3	} /* this targets the default scrollbar (compulsory) */

Bu pseudo element varsa, WebKit standart içsel kaydırma çubuğu görüntülemeyi kapatır ve CSS'de sağlanan bilgileri kullanır. - Surfin Safari

Ve şimdi bazı diğer pseudo-elementler için:

	::-webkit-scrollbar-track {
		  background-color: #b46868;
	} /* the new scrollbar will have a flat appearance with the set background color */

	::-webkit-scrollbar-thumb {
		  background-color: rgba(0, 0, 0, 0.2); 
	} /* this will style the thumb, ignoring the track */

	::-webkit-scrollbar-button {
		  background-color: #7c2929;
	} /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */

	::-webkit-scrollbar-corner {
		  background-color: black;
	} /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */

Bu CSS'yi ekledikten sonra aşağıdaki efekti görebilirsiniz (yine sadece Webkit tarayıcılarında).

Bilin bakalım ne? Internet Explorer'ın kendi kaydırma çubuğu stillendirmesi var.

Evet bu doğru - aslında IE, CSS aracılığıyla kaydırma çubuklarının stillendirilebilmesini destekleyen ilk tarayıcıdır. IE 5.5 zamanlarından beri vardı, ancak yalnızca renk değiştirilebiliyordu.

Bu özellikler hala günümüzde kullanılabilir; Gösterim amacıyla IE 9'da bu tek özelliğe bir göz atın:

1	body {
2	scrollbar-face-color: #b46868;
3	}

Nasıl göründüğüne bakın:

3. Adım: Webkit Olmayan Tarayıcılar için B Planı

Bu kadar WebKit eğlencesi yeterli. Bu eğlenceye Firefox, IE ve Opera da katılabilir. Onlar için son çare olarak jScrollPane kullanmak yeterlidir. Bu jQuery eklentisi Kelvin Luck tarafından geliştirildi ve günün kurtarıcısı olacaktır.

Kelvin'in web sitesinde pek çok iyi örnek bulunmaktadır ancak temel kullanım için yapmamız gereken tek şey jQuery ve jScrollPane dosyalarını indirmek ve bunları aşağıdaki şekilde uygulamaktır:

	<!-- this cssfile can be found in the jScrollPane package -->
	<link rel="stylesheet" type="text/css" href="jquery.jscrollpane.css" />

	<!-- latest jQuery direct from google's CDN -->
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<!-- the jScrollPane script -->
	<script type="text/javascript" src="jquery.jscrollpane.min.js"></script>

	<!--instantiate after some browser sniffing to rule out webkit browsers-->
	<script type="text/javascript">
	
	  $(document).ready(function () {
	      if (!$.browser.webkit) {
	          $('.container').jScrollPane();
	      }
	  });
	
	</script>
				
</body>

Sadece temamızla uyumlu hale getirmek için jquery.jscrollpane.css dosyasını açalım ve aşağıdaki satırları renk değerlerimizle düzenleyelim (performans iyileştirmeleri için tüm stilleri kendi dosyalarınıza koymak isteyebilirsiniz):

	.jspTrack
	{
		background: #b46868; /* changed from #dde */
		position: relative;
	}

	.jspDrag
	{
		background: rgba(0,0,0,0.2); /* changed from #bbd */
		position: relative;
		top: 0;
		left: 0;
		cursor: pointer;
	}

Firefox'da ne göreceğinizin bir ekran görüntüsü:

Sonuç

Gmail ve Google+ gibi Web Uygulamaları (ve diğer birçok örnekle) zaten bu fikri benimsedi ve bu ivme devam ederse belki de Firefox ve IE de kendi çözümlerini sağlayacaktır.

Umarım bu Çabuk İpucu hoşunuza gitmiştir ve tasarım çalışmalarınızda kaydırma çubuklarıyla ne yaptığınızı görmek için sabırsızlanıyorum!

Diğer Kaynaklar

Chris Coyier'den WebKit'te Özel Kaydırma Çubuklar
webkit.org'da Tarayıcı Çubuklarını Stillendirmek

Envato Market'teki özelleştirilebilir kaydırma çubukları

Hazır bir çözüm arıyorsanız Envato Market, web sitenize kolayca ekleyip yeni efektler yaratabilmeniz için bir dizi kaydırma çubuğu seçeneği sunar. İşte bunlardan bazıları:

1. Lazybars - Themeable responsive scrollbar jQuery plugin

Lazybars kullanımı kolay temalı jQuery kaydırma çubuğu eklentisidir. Bu kaydırma çubuklarını, web sitenizdeki kaydırılabilir herhangi bir öğeye bir sınıf adı ekleyerek uygulayabilirsiniz.

Lazybars ile gelen mevcut temaları kullanabilir veya basit bir CSS ile kendi temalarınızı oluşturabilirsiniz.

Lazybars - Themeable responsive scrollbar jQuery plugin

2. Fancy Scrollbar - WordPress

"Fancy Scrollbar - WordPress", WordPress sitelerinde özel kaydırma çubuğu oluşturabilen bir eklentidir. Bir sürü özelleştirme seçeneği vardır. Renk, efektler, kaydırma gecikmesi, ray şeridi ve daha pek çok parametreyi özelleştirebilirsiniz.

3. Awesome Custom Scrollbar

Awesome Custom Scrollbar WordPress web siteniz için son derece özelleştirilebilir bir özel jQuery kaydırma çubuğu eklentisidir. Bu eklenti ile web sayfanızın kaydırma çubuğunu özelleştirebilir ve tema dosyalarında bile istediğiniz yere dilediğiniz yerde kısayol kullanarak Özel Kaydırma Çubuğu yerleştirebilirsiniz.

4. DZS Scroller

DZS Scroller, siteniz için, içerdiği üç tema yetersiz olması durumunda, CSS yoluyla çok kolay bir şekilde özelleştirebileceğiniz bir kaydırma çubuğu sağlar. Ayrıca, fareyle üzerine gelindiğinde(hover) kaydırma veya fare ayrılma(mouse leave) işlemi sonunda solmaya(fade) benzer gelişmiş işlevlerle birlikte gelir ve iPhone/iPad'lerdede çalışır.

5. CSS3 Kaydırma Çubuğu Stilleri

Web siteniz için güzel ve renkli CSS3 Kaydırma çubuğunu kullanmak kolaydır. Yeni CSS3 Kaydırma Çubuğunun keyfini çıkarmanız için mevcut CSS dosyasına eklemeniz yeterlidir.

CSS3 Scrollbar Styles — CSS3 Kaydırma Çubuğu Stilleri