Merhaba arkadaşlar. Bu yazımızda jquery ve css yardımıyla scrollbar tasarımı yapacağız. Uygulamamızın içerisine çekeceğimiz javascript dosyalarını internette arayarak ulaşabilirsiniz. Öncelikle css kodlarımızı paylaşacağım. Sonrasında javascript kodlarımızı ve html kodlarımızı yazacağız. Şimdi geçelim kodlarımıza.
Css Kodlarımız :

.scroll-pane

        {

        width: 100%;

        height: 150px;

		overflow: auto;

        }

.horizontal-only

        {

        height: auto;

        max-height: 200px;

        }

#anadiv {

	position:absolute;

	left:446px;

	top:180px;

	width:433px;

	height:173px;

	z-index:1;

	border:solid;

	border-width:3px;

	border-color:#F8942D; //ana divimizin kenarlık - border rengini ayarladık

	font-family:Tahoma;

	color:#333333;

        }

#bas {

      background-color:#F8942D; //başlık alanının arkaplan rengini belirledik.

	  height:23px;

      font-family:Tahoma;

	  color:#ffffff;

     }

	 

.jspContainer

{

	overflow: hidden;

	position: relative;

}

.jspPane

{

	position: absolute;

}

.jspVerticalBar

{

	position: absolute;

	top: 0;

	right: 0;

	width: 8px;

	height: 100%;

}

.jspTrack

{

	background: #f6f6f6; //scrollbar'ın arkaplan rengini ayarladık.

	position: relative;

}



.jspDrag

{

	background: #999999; // scrollbar'ımızın rengini ayarladık.

	position: relative;

	top: 0;

	left: 0;

	cursor: pointer;

}

* html .jspCorner

{

	margin: 0 -3px 0 0;

}

Burada kullandığımız divlerin düzenlemelerini ve scrollbarın tasarımını yaptık. Şimdi geçelim javascript kodlarımıza.
Javascript Kodlarımız :

<script src="jquery-1.6.1.min.js" type="text/javascript"></script>

<script src="jquery.mousewheel.js" type="text/javascript"></script>

<script src="jquery.jscrollpane.min.js" type="text/javascript"></script>

$(function () {

                $('.scroll-pane').jScrollPane();

            });

Jquery dosyalarımızı içeri aktardık. Bu dosyaları internette arayarak bulabilirsiniz. Şimdi html kodlarımıza geçelim.
Html Kodlarımız :

<div id="anadiv"><div id="bas"> &nbsp;Başlığımız</div><div class="scroll-pane">

<table border="0" width="100%"><tr><td>

satır1<br>

satır2<br>

satır3<br>

satır4<br>

satır5<br>

satır6<br>

satır7<br>

satır8<br>

satır9<br>

satır10<br>

satır11<br>

satır12<br>

satır13<br>

satır14<br>

satır15<br>

</td></tr></table>

</div>

</div>

Burada anadiv, bas, scroll-pane adlarında divlerimizi oluşturduk. Anadiv tüm divlerimizi kapsayan divimizdir. Bas divimiz başlığımızın bulunduğu divdir. Scroll-pane adından da anlaşılacağı üzere scrollbar ile ilgili divimizdir. Scroll'umuzu bu dive oluşturduk. Çalışan halini yorum yoluyla istemeniz halinde gönderebilirim. Sonraki makalelerde görüşmek üzere...