摘要：使用了很多的滾動(dòng)條插件，如這次說說，支持水平滾動(dòng)條，支持文本區(qū)和文檔頁面滾動(dòng)條。，兼容所有的桌面瀏覽器。，兼容移動(dòng)設(shè)備黑莓手機(jī)和芒果。，兼容所有觸摸設(shè)備平板電腦窗口接口。，簡(jiǎn)單的安裝和激活不破壞代碼。

使用了很多的滾動(dòng)條插件，如Iscroll,swiper,這次說說Nicescroll

1，支持水平滾動(dòng)條!
2，支持div,IFrames,文本區(qū)和文檔頁面滾動(dòng)條。
3，兼容所有的桌面瀏覽器:Firefox 4 +,Chrome 5 +,Safari 4 +(win/ mac),Opera 10 +,IE 6+。
4，兼容移動(dòng)設(shè)備:iPad / iPhone / iPod,Android 2.2 +,黑莓手機(jī)和playbook(WebWorks/Table OS),Windows Phone 7.5芒果。
5，兼容所有觸摸設(shè)備:iPad,Android平板電腦,窗口接口。
6，兼容多輸入設(shè)備(鼠標(biāo)和觸摸或筆):窗面,桌面Chrome，觸屏筆記本；
7，兼容兩頭鼠:蘋果魔術(shù)鼠標(biāo),蘋果雙輪鼠標(biāo),電腦雙輪鼠標(biāo)(如果瀏覽器支持)。
8，簡(jiǎn)單的安裝和激活,不破壞代碼。
9，非常時(shí)尚的滾動(dòng)條,沒有占領(lǐng)你的窗口
10，你可以定義文檔滾動(dòng)條的風(fēng)格! !(不是所有的腳本實(shí)現(xiàn)此功能)
11，在所有瀏覽器上你可以滾動(dòng):拖動(dòng)鼠標(biāo),鼠標(biāo)滾輪(速度可定制),鍵盤導(dǎo)航(cursor,pagup/down,home/end )
12，滾動(dòng)光滑(如現(xiàn)代平板電腦瀏覽),速度是可定制的
13，縮放功能
14，硬件加速滾動(dòng)(可用)
15，動(dòng)畫幀支持smoth滾動(dòng)和cpu-saving
16，拖動(dòng)滾動(dòng)模式與滾動(dòng)動(dòng)力(如觸摸設(shè)備)
17，所有主要瀏覽器桌面和移動(dòng)版本通過測(cè)試
18，支持觸摸設(shè)備
19，支持多輸入設(shè)備(與MSPointer IE10瀏覽器)
20，兼容其他瀏覽器,包括IE6,Safari在Mac和WP7芒果!
21，可定制滾動(dòng)條方向
22，滾動(dòng)事件
23，與jQuery代碼完全集成
24，兼容jQuery UI, jQuery Touch, jQuery Mobile

引入核心文件，插件需要引入1.5.X以上版本的jquery庫

簡(jiǎn)單使用，改變文檔滾動(dòng)條的風(fēng)格（使用html元素）

$(document).ready(
  function() { 
    $("html").niceScroll();
  }
);

返回對(duì)象

var nice = false;
$(document).ready(
  function() { 
    nice = $("html").niceScroll();
  }
);

改變DIV光標(biāo)顏色

$(document).ready(
  function() { 
    $("#thisdiv").niceScroll({cursorcolor:"#00F"});
  }
);

使用容器“wrapper”包含DIV，由兩個(gè)DIV組成，前一個(gè)為vieport，后一個(gè)為內(nèi)容

$(document).ready(
  function() { 
    $("#viewportdiv").niceScroll("#wrapperdiv",{cursorcolor:"#00F"});
  }
);

獲取滾動(dòng)對(duì)象

var nice = $("#mydiv").getNiceScroll();

隱藏滾動(dòng)條

$("#mydiv").getNiceScroll().hide();

檢測(cè)滾動(dòng)條是否重置大?。ó?dāng)窗口改變大小時(shí)）

$("#mydiv").getNiceScroll().resize();

滾動(dòng)到某個(gè)位置

 $("#mydiv").getNiceScroll(0).doScrollLeft(x, duration); // Scroll X Axis
 $("#mydiv").getNiceScroll(0).doScrollTop(y, duration); // Scroll Y Axis

配置參數(shù)

$("#thisdiv").niceScroll({
        cursorcolor: "#424242", // 改變滾動(dòng)條顏色，使用16進(jìn)制顏色值
        cursoropacitymin: 0, // 當(dāng)滾動(dòng)條是隱藏狀態(tài)時(shí)改變透明度, 值范圍 1 到 0
        cursoropacitymax: 1, // 當(dāng)滾動(dòng)條是顯示狀態(tài)時(shí)改變透明度, 值范圍 1 到 0
        cursorwidth: "5px", // 滾動(dòng)條的寬度，單位：像素
        cursorborder: "1px solid #fff", // CSS方式定義滾動(dòng)條邊框
        cursorborderradius: "5px", // 滾動(dòng)條圓角（像素）
        zindex: "auto" | , // 改變滾動(dòng)條的DIV的z-index值
        scrollspeed: 60, // 滾動(dòng)速度
        mousescrollstep: 40, // 鼠標(biāo)滾輪的滾動(dòng)速度 (像素)
        touchbehavior: false, // 激活拖拽滾動(dòng)
        hwacceleration: true, // 激活硬件加速
        boxzoom: false, // 激活放大box的內(nèi)容
        dblclickzoom: true, // (僅當(dāng) boxzoom=true時(shí)有效)雙擊box時(shí)放大
        gesturezoom: true, // (僅 boxzoom=true 和觸屏設(shè)備時(shí)有效) 激活變焦當(dāng)out/in（兩個(gè)手指外張或收縮）
        grabcursorenabled: true // (僅當(dāng) touchbehavior=true) 顯示“抓住”圖標(biāo)display "grab" icon
        autohidemode: true, // 隱藏滾動(dòng)條的方式, 可用的值: 
          true | // 無滾動(dòng)時(shí)隱藏
          "cursor" | // 隱藏
          false | // 不隱藏,
          "leave" | // 僅在指針離開內(nèi)容時(shí)隱藏
          "hidden" | // 一直隱藏
          "scroll", // 僅在滾動(dòng)時(shí)顯示        
        background: "", // 軌道的背景顏色
        iframeautoresize: true, // 在加載事件時(shí)自動(dòng)重置iframe大小
        cursorminheight: 32, // 設(shè)置滾動(dòng)條的最小高度 (像素)
        preservenativescrolling: true, // 你可以用鼠標(biāo)滾動(dòng)可滾動(dòng)區(qū)域的滾動(dòng)條和增加鼠標(biāo)滾輪事件
        railoffset: false, // 可以使用top/left來修正位置
        bouncescroll: false, // (only hw accell) 啟用滾動(dòng)跳躍的內(nèi)容移動(dòng)
        spacebarenabled: true, // 當(dāng)按下空格時(shí)使頁面向下滾動(dòng)
        railpadding: { top: 0, right: 0, left: 0, bottom: 0 }, // 設(shè)置軌道的內(nèi)間距
        disableoutline: true, // 當(dāng)選中一個(gè)使用nicescroll的div時(shí)，chrome瀏覽器中禁用outline
        horizrailenabled: true, // nicescroll可以管理水平滾動(dòng)
        railalign: right, // 對(duì)齊垂直軌道
        railvalign: bottom, // 對(duì)齊水平軌道
        enabletranslate3d: true, // nicescroll 可以使用CSS變型來滾動(dòng)內(nèi)容
        enablemousewheel: true, // nicescroll可以管理鼠標(biāo)滾輪事件
        enablekeyboard: true, // nicescroll可以管理鍵盤事件
        smoothscroll: true, // ease動(dòng)畫滾動(dòng)
        sensitiverail: true, // 單擊軌道產(chǎn)生滾動(dòng)
        enablemouselockapi: true, // 可以用鼠標(biāo)鎖定API標(biāo)題 (類似對(duì)象拖動(dòng))
        cursorfixedheight: false, // 修正光標(biāo)的高度（像素）
        hidecursordelay: 400, // 設(shè)置滾動(dòng)條淡出的延遲時(shí)間（毫秒）
        directionlockdeadzone: 6, // 設(shè)定死區(qū)，為激活方向鎖定（像素）
        nativeparentscrolling: true, // 檢測(cè)內(nèi)容底部便于讓父級(jí)滾動(dòng)
        enablescrollonselection: true, // 當(dāng)選擇文本時(shí)激活內(nèi)容自動(dòng)滾動(dòng)
        cursordragspeed: 0.3, // 設(shè)置拖拽的速度
        rtlmode: "auto", // DIV的水平滾動(dòng)從左邊開始
        cursordragontouch: false, // 使用觸屏模式來實(shí)現(xiàn)拖拽
        oneaxismousemode: "auto", // 當(dāng)只有水平滾動(dòng)時(shí)可以用鼠標(biāo)滾輪來滾動(dòng)，如果設(shè)為false則不支持水平滾動(dòng)，如果設(shè)為auto支持雙軸滾動(dòng)
        scriptpath: "" // 為boxmode圖片自定義路徑 ("" => same script path)
        preventmultitouchscrolling: true // 防止多觸點(diǎn)事件引發(fā)滾動(dòng)
    });

More

Configuration parameters
When you call "niceScroll" you can pass some parameters to custom visual aspects:

cursorcolor - change cursor color in hex, default is "#000000"
cursoropacitymin - change opacity very cursor is inactive (scrollabar "hidden" state), range from 1 to 0, default is 0 (hidden)
cursoropacitymax - change opacity very cursor is active (scrollabar "visible" state), range from 1 to 0, default is 1 (full opacity)
cursorwidth - cursor width in pixel, default is 5 (you can write "5px" too)
cursorborder - css definition for cursor border, default is "1px solid #fff"
cursorborderradius - border radius in pixel for cursor, default is "4px"
zindex - change z-index for scrollbar div, default value is 9999
scrollspeed - scrolling speed, default value is 60
mousescrollstep - scrolling speed with mouse wheel, default value is 40 (pixel)
touchbehavior - enable cursor-drag scrolling like touch devices in desktop computer (default:false)
hwacceleration - use hardware accelerated scroll when supported (default:true)
boxzoom - enable zoom for box content (default:false)
dblclickzoom - (only when boxzoom=true) zoom activated when double click on box (default:true)
gesturezoom - (only when boxzoom=true and with touch devices) zoom activated when pitch out/in on box (default:true)
grabcursorenabled, display "grab" icon for div with touchbehavior = true, (default:true)
autohidemode, how hide the scrollbar works, true=default / "cursor" = only cursor hidden / false = do not hide
background, change css for rail background, default is ""
iframeautoresize, autoresize iframe on load event (default:true)
cursorminheight, set the minimum cursor height in pixel (default:20)
preservenativescrolling, you can scroll native scrollable areas with mouse, bubbling mouse wheel event (default:true)
railoffset, you can add offset top/left for rail position (default:false)
bouncescroll, enable scroll bouncing at the end of content as mobile-like (only hw accell) (default:false)
spacebarenabled, enable page down scrolling when space bar has pressed (default:true)
railpadding, set padding for rail bar (default:{top:0,right:0,left:0,bottom:0})
disableoutline, for chrome browser, disable outline (orange hightlight) when selecting a div with nicescroll (default:true)
horizrailenabled, nicescroll can manage horizontal scroll (default:true)
railalign, alignment of vertical rail (defaul:"right")
railvalign, alignment of horizontal rail (defaul:"bottom")
enabletranslate3d, nicescroll can use css translate to scroll content (default:true)
enablemousewheel, nicescroll can manage mouse wheel events (default:true)
enablekeyboard, nicescroll can manage keyboard events (default:true)
smoothscroll, scroll with ease movement (default:true)
sensitiverail, click on rail make a scroll (default:true)
enablemouselockapi, can use mouse caption lock API (same issue on object dragging) (default:true)
cursorfixedheight, set fixed height for cursor in pixel (default:false)
hidecursordelay, set the delay in microseconds to fading out scrollbars (default:400)
directionlockdeadzone, dead zone in pixels for direction lock activation (default:6)
nativeparentscrolling , detect bottom of content and let parent to scroll, as native scroll does (default:true)
enablescrollonselection, enable auto-scrolling of content when selection text (default:true)

官網(wǎng)及示例：官網(wǎng) 示例 下載
備注：github的代碼可能在手機(jī)端無法使用，建議到示例代碼里面自己提取，或者：niceScroll3.6穩(wěn)定版