1. 程式人生 > >Jquery-nicesrcoll(滾動條外掛)使用

Jquery-nicesrcoll(滾動條外掛)使用

<script src="jquery-1.11.1.js"></script>
<script src="jquery.nicescroll.js"></script>
<style>
   .box {
       width: 400px;
       height: 500px;
       overflow: auto;
       border: 1px solid #000;
   }
   .box p {
       width: 100%;
       height: 100px;
       font-size: 24px;
       line-height: 100px;
       background: gold;
       margin-bottom: 20px;
   }
</style>
<div class="box">
    <p>111111111111111111</p>
    <p>2222222222222222222</p>
    <p>33333333333333333333</p>
    <p>444444444444444444444</p>
    <p>5555555555555555555555</p>
</div>
<script>
    $(".box").niceScroll(); // 預設的初始化
    $(".box").niceScroll({cursorcolor: "#00F"}); //可修改配置引數的初始化
    $(".box").getNiceScroll().hide(); //隱藏滾動條
    $(".box").getNiceScroll().remove();   //刪除此物件(滾動條)
    $(".box").getNiceScroll().resize();  //檢測滾動條是否重置大小(當視窗改變大小時)
    $(".box").getNiceScroll(0).doScrollLeft(x, duration);  // Scroll X Axis 第一個是位置,第二個是時間(但是使用的時候沒有效果...)
    $(".box").getNiceScroll(0).doScrollTop(y,duration);  // Scroll Y Axis
</script>

內建引數配置表:

zindex: "auto",
    cursoropacitymin: 0,  // 當滾動條是隱藏狀態時改變透明度,值範圍1到0
    cursoropacitymax: 1,  // 當滾動條是顯示狀態時改變透明度,值範圍1到0
    cursorcolor: "#424242",  // 滾動條顏色,使用16進位制顏色值
    cursorwidth: "6px",  // 滾動條的寬度,單位:畫素
    cursorborder: "1px solid #fff",  // CSS 方式定義滾動條邊框
    cursorborderradius: "5px",  // 滾動條圓角(畫素)
    scrollspeed: 40,  // 滾動速度
    mousescrollstep: 9 * 3,  // 滑鼠滾動的滾動速度(畫素)
    touchbehavior: false,   // deprecated  啟用拖拽滾動 (不贊成,不宜用)
    emulatetouch: false,    // replacing touchbehavior  emulate(模擬)
    hwacceleration: true,  // 啟用硬體加速
    usetransition: true,
    boxzoom: false,  // 啟用放大box的內容
    dblclickzoom: true,  // (僅當 boxzoom=true 時有效)雙擊 box 時放大
    gesturezoom: true,  // (僅 boxzoom=true 和觸屏裝置時有效)啟用變焦當 out/in (兩個手指外賬或收縮)
    grabcursorenabled: true,  // (僅當 透徹behavior=true)顯示“抓住”圖示 display "grab" icon
    autohidemode: true,  // 隱藏滾動條的方式,可用的值:true|無滾動時隱藏,"cursor"|隱藏,false|不隱藏,"leave"|僅在指標離開內容時隱藏,"hidden"|一直隱藏,"scroll"|僅在滾動時顯示
    background: "",  // 軌道的背景顏色
    iframeautoresize: true,  // 在載入事件時自動重置 iframe 大小
    cursorminheight: 32,  // 設定滾動條的最小高度(畫素)
    preservenativescrolling: true,  // 你可以用滑鼠滾動可滾動區域的滾動條和增加滑鼠滾輪事件
    railoffset: false,  // 可以使用 top/left 來修正位置
    railhoffset: false, 
    bouncescroll: true,  // (only hw accell)啟用滾動跳躍的內容移動
    spacebarenabled: true,  // 當按下空格時使頁面向下滾動
    railpadding: {  // 設定軌道的內間距
      top: 0,
      right: 0,
      left: 0,
      bottom: 0
    },
    disableoutline: true,  // 當選中一個使用 niceScroll 的 div 時,Chrome瀏覽器中禁用 outline 
    horizrailenabled: true,  // niceScroll 可以管理水平滾動
    railalign: "right",  // 對齊垂直軌道
    railvalign: "bottom",  // 對齊水平軌道
    enabletranslate3d: true,  // niceScroll 可以使用 CSS 變型來滾動內容
    enablemousewheel: true,  // niceScroll 可以管理滑鼠滾輪事件
    enablekeyboard: true,  // niceScroll 可以管理鍵盤事件
    smoothscroll: true,  // ease 動畫滾動
    sensitiverail: true,  // 單擊軌道產生滾動
    enablemouselockapi: true,  // 可以用滑鼠鎖定 API 標題(類似物件拖動)
    //      cursormaxheight:false,
    cursorfixedheight: false,  // 修正游標的高度(畫素)
    directionlockdeadzone: 6,  // 設定死區,為啟用方向鎖定(畫素)
    hidecursordelay: 400,  // 設定滾動條淡出的延遲時間(毫秒)
    nativeparentscrolling: true,  // 檢測內容底部便於讓父級滾動
    enablescrollonselection: true,  // 當選擇文字時啟用內容自動滾動
    overflowx: true,
    overflowy: true,
    cursordragspeed: 0.3,  // 設定拖拽的速度
    rtlmode: "auto",  // DIV 的水平滾動從左邊開始
    cursordragontouch: false,  // 使用觸屏模式來實現拖拽
    oneaxismousemode: "auto",  // 當只用水平滾動時可以用滑鼠來滾動,如果設為 false 則不支援水平滾動,如果設為 auto 支援雙軸滾動
    scriptpath: getScriptPath(),  // 為 boxmode 圖片自定義路徑
    preventmultitouchscrolling: true,  // 防止多觸點時間引發滾動
    disablemutationobserver: false,
    enableobserver: true,
    scrollbarid: false