SlimScroll – İnce kaydırma çubukları

Facebook  sohbette  görmüşsünüzdür mouse  arkakadaşların isimlerinin  olduğu sohbet alanı üzerine  geldiği  an ince,  gri,  oval  bir kaydırma  çubuğu  çıkıyor. Piotr Rochala jQuery  kullanarak  bu özeliğin aynısını  oluşturmuş meraklılara.  Google  ve  Facebook’un bu özelliği  kullanmasıyla  beraber  bir çok  kişi eklentiyi  kullanmak isteyecektir sanırım.  Ama  yanlış  değilsem bu  özelliği ilk çıkaranlar  Facebook ve  Google değil de Yahoo olarak biliyorum. Yahoo sitesinde  öyle  bir  özelliğe  rastlamadım ama kullanıyor  olabilir. Sitemizde  Yui  diye  bir  kategori  var jQuery benzeri  webtasarımcılar için Yahoo  tarafından hazırlanmış  mini  bir  javascript  kütüphanesi.  Yui Framework’ü ile bu  örneğin aynısı  Yahoo  tarafından yayınlanmıştı.  Mintik’te örneği  paylaşmıştım o zamanlar  ama hoşuma  gitmediği  için kaydırma  çubuğunu  kaldırdım demodan. Buradan Yui örneğine  bakabilirsiniz.

Gelelim asıl  örneğimize.

• Demo : jQuery SlimScroll Plugin
• Download : jQuery SlimScroll Plugin

 Kullanım

Head  etiketleri  arasına eklenecek olan bölümler

jQuery  ve  eklenti url  adresleri :

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<script type="text/javascript" src="slimScroll.js"></script>

Css :

<style type="text/css">
		* { font-family:Tahoma,sans-serif; font-size:12px; color:#000; }
		h1 { font-size:20px; margin:0 }
		h2 { font-size:14px; margin:0 }
		p { margin:5px 0; }
		.slimScrollDiv { border: 1px solid #ccc; margin:10px; }
		#multi-test { }
</style>

Body  etiketleri arasına  eklenecek olan örnek bir  html :

<div class="some-content-related-div">
<div id="inner-content-div">
<p>Lorem ipsum dolor sit amet, consectetur .... snip</p>
</div>
</div>

Eklentiyi  çalıştıran javascript komut (basit) :

$(function(){
    $('#inner-content-div').slimScroll({
        height: '250px'
    });
});

Eklentiyi çalıştıran javascript komut (geliştirilmiş) :

$(selector).slimScroll({
    width: '300px',
    height: '500px',
    size: '10px',
    position: 'left',
    color: '#ffcc00',
    alwaysVisible: true,
    distance: '20px',
    start: $('#child_image_element'),
    railVisible: true,
    railColor: '#222',
    railOpacity: 0.3,
    wheelStep: 10,
    allowPageScroll: false
});