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
});