jQuery-slimScroll控制滾動條樣式的插件

    jQuery-slimScroll控制滾動條樣式的插件功能比較簡單，可是插件的大小隻有6kb，相對於mCustomScrollbar來講就小的不少了。可是相對於mCustomScollbar的功能來講，jQuery-slimScroll就比較簡單了。jQuery-slimScroll檢測在IE9以上才能正常使用，IE9如下顯示正常的滾動條。接下來介紹下jQuery-slimScroll的使用。

    HTML代碼

<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>

 CSS樣式

.container {
		  width: 400px;
		  height: 300px;
		  background-color: #DCDCDC;
		  overflow: scroll; /* 讓它顯示滾動條 */
}

    在html代碼中引用jquery.min.js 和 slimscroll.js兩個文件，而且slimscroll.js依賴於jquery.js

<script type="text/javascript" src="/BusinessMG/include/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<script type="text/javascript" src="/BusinessMG/include/plugins/slimScroll/jquery.slimscroll.min.js"></script>

   js代碼

$(".container").slimScroll({
	width:"300px",  
	height: '500px',
	alwaysVisible: false,
	});

添加這段js代碼之後，會給$(".container")這個元素動態添加一個class="slimScrollDiv"的父元素。父元素和子元素的寬高都會設置同樣的，若是你要針對父元素這隻樣式，那麼你css中添加對.slimScrollDiv的樣式就能夠。

介紹下slimscroll

$(selector).slimScroll({
    width: '300px',//可見的滾動區域的寬度。若未設置拉伸至父元素。默認值：none
    height: '500px',//可見g滾動區的高度。還支持自動設置的高度和父容器相同。默認：一切
    size: '10px', //在滾動條的像素寬度。默認值：7px
    position: 'left',//左或右。設置滾動條的位置。默認值：對
    color: '#ffcc00',//在滾動條顏色。#默認：000000
    alwaysVisible: true,//滾動條是否老是可見
    distance: '20px',  //距離在父元素邊應該出如今滾動條。它與位置屬性一塊兒使用(距離左右的距離)。默值：1px
    start: $('#child_image_element'),//自定義滾動條剛開始的位置，能夠是px,也能夠是一個元素
    railVisible: true,//滾動條的軌道是否能夠見  默認：false
    railColor: '#222',//滾動條軌道的顏色 默認：#333333
    railOpacity: 0.3,//滾動條軌道的透明度 默認: false
    wheelStep: 10,//鼠標滾動的偏移量。默認：20
    allowPageScroll: false, //當滾動區域滾到頂部或者底部的時候，是否滾動頁面。 默認false。
    disableFadeOut: false //禁用滾動條自動消失。當設置爲真實的滾動條不消失一段時間當鼠標在slimscroll div後 });
   其餘的幾個參數：
scrollTo - 滾動到指定位置. Example: $(element).slimScroll({ scrollTo: '50px' });

scrollBy - 滾動多少距離，Example: $(element).slimScroll({ scrollBy: '60px' });

touchScrollStep - 調觸摸滑動的靈敏度.Default: 200

Events:當滾動條滑動條父容器的頂部或底部的時候，你能夠綁定事件：
$(selector).slimScroll().bind('slimscroll', function(e, pos){
    console.log("Reached " + pos");
});

若是你須要更多，更好的滾動條樣式的支持，能夠是考慮使用:mCustomScollbar.js .若是僅僅是簡單使用，具體瞭解：http://rocha.la/jQuery-slimScroll