jQuery tinyscrollbar插件

   今天做項目遇到了一個tinyscrollbar插件很不錯，原版的英文地址是http://www.baijs.nl/tinyscrollbar/，可以做出很多效果，

大體的調用格式就是：

$('#scrollbar1').tinyscrollbar(【options】);

options有一下幾個參數選項：

其中包括可選參數和默認值

axis: 'x' -- 表示坐標的水平或者垂直'x' or 'y' .

wheel: 40 -- 表示鼠標滑輪一次滾動多少個像素的區域

scroll: true --是否禁用滾輪，默認不禁用（不常用）

lockscroll: true -- 如果沒有更多內容的時候，鎖定滾動條（不常用）

size: 'auto' -- 設置滾動條的高度度，可以為一個固定的像素值

sizethumb: 'auto' -- 設置滾動條的寬度，可以為一個固定的像素值

 

其中tinyscrollbar還有一個非常好用的方法：

$("#scrollbar").tinyscrollbar_update()

此用法表示頁面內容發生變化的時候，實際就是瀏覽器的大小發生變化的時候，通過即時的盜用此方法，可改變滾動條的樣式，所以一般習慣性綁定在$(window).resize();上面

即：

$(window).resize(function(){
    $("#scrollbar").tinyscrollbar_update();
})

同時tinyscrollbar插件對頁面html的代碼有着特殊的要求，因為很多div包括其類名是封裝在插件里面的，輕易不會改動

大體格式如下：（樣式問題就不多說了 設置好寬高  overflow等，找好滾動條的素材即可）

<div id="scrollbar1">
        <div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
        <div class="viewport">
             <div class="overview">
                <!--此處添加的內容 codes here-->
            </div>
        </div>
</div>