jQuery Scrollbar Eklentisi

9 yorum

Sizlere perfectScrollbar adında bir jquery scrollbar eklentisini tanıtacağım.. Uzun zamandır kendi projelerimde kullanıyorum, jquery ile özel scrollbar yapmak isteyenler için ideal bir eklenti.

Öncelikle eklentiyi şuradan indirebilirsiniz.. İçerisinde src klasörü altında bize lazım olacaklar bulunuyor.. Bunlar;

– jquery.mousewheel.js
– perfect-scrollbar.js
– perfect-scrollbar.css

Nasıl kullanacağız?

İlk olarak jquery kütüphanesi lazım tabi, bunu söylememe gerek yok 🙂 Bir html oluşturalım hemen..

<div id="content">
... içerik ...
</div>

Basitte bir css yazalım. CSS’de olması gerekenler overflow: hidden ve position: relative bunları koymayı unutmayın 🙂

.content {
	width: 500px;
	height: 500px;
	overflow: hidden;
	position: relative;
}

Ve tabi ki eklentiyi kullanmaya geldi sıra..

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="perfect-scrollbar/jquery.mousewheel.js"></script>
<script src="perfect-scrollbar/perfect-scrollbar.js"></script>
<link href="perfect-scrollbar/perfect-scrollbar.css" rel="stylesheet" />
<script type="text/javascript">
$(function(){
     $('#content').perfectScrollbar();
});
</script>

İsterseniz parametrelerde kullanabilirsiniz.. Örneğin scroll hızını ayarlayabilirsiniz.. Ya da scroll’un sadece x ya da y ekseninde çıkmasını sağlayabilirsiniz..

$('#content').perfectScrollbar({
	suppressScrollX: true,
	wheelSpeed:100
});

Nesneye yeni içerikler eklendiğinde scroll’u update etmek içinse şu şekilde bir kullanım gerekiyor;

$("#content").scrollTop(0);
$("#content").perfectScrollbar('update');

Demo

http://www.erbilen.net/demo/perfect-scrollbar/

İndir

http://www.erbilen.net/download/perfect-scrollbar.rar

Yorumlar (9)

celil demiş ki;

emeğine sağlık teşekkür ederim kardeşim :)

ali ihsan demiş ki;

eline sağlık güzel olmuş

Ümit ÇUBUKÇUOĞLU demiş ki;

Teşekkürler :d

rifkicakar demiş ki;

Teşekkür ederim tayfun. Hiç aklıma gelmemişdi de :) ufak bi not ekliyim (benim gibileri için) bu kodu çağırdığınız js dosyasından sonra eklemeniz gerekir. ( sayfanın sonunda olması gerekli)

Tayfun Erbilen demiş ki;

@rifkicakar, css kodunuza şunu ilave edin;

.ps-scrollbar-y-rail { opacity: 1; }

rifkicakar demiş ki;

Anlatımın için teşkkürler. Bir sorum olacakdı.
Uyguladığımız div üzerine gelince scroll gözükmesi yerine scroll un sürekli gözükmesini nasıl yapabilir. yani scroll hiç kaybolmasın :)
Şimdi den herşey için teşkkürler.

Ümit ÇUBUKÇUOĞLU demiş ki;

perfect-scrollbar.css bulamadım :)

Fatih Kızıltoprak demiş ki;

Tam ihtiyacım olduğu zamanda buldum. Çok teşekkür ederim.

Yorum Gönder