初探jquery.slimscroll.js和iscroll5.js

網上關於實現各類滾動效果的插件不勝枚舉，這裏，我簡單介紹一下本身用過的兩款比較有表明性的插件：

1.jquery.slimscroll.js，須要先引入jquery類庫，主要用於模擬傳統的瀏覽器滾動條(豎向)，將要設置的內容外加div元素（能夠取id爲wrapper）包裹，而後在$(function(){})中進行實例化的參數設置：

var myScroll=$("#wrapper").slimScroll({
    // width:"300px",//容器寬度度
    height:"600px",//容器高度
    size:"30px",//滾動條寬度
    position:"left",//滾動條位置，默認right
    color:"green",//滾動條顏色,默認#000000
    alwaysVisible:true,//是否禁用隱藏滾動條,默認false
    distance:"10px",//距離邊框距離，默認1px
    start:".floor2",//滾動條初始位置,可選值top,bottom,$(selector),默認top
    wheelStep:'12px',//滾動條滾動值,默認10px
    //railVisible:true,//滾動條背景軌跡,默認false
    //railColor:'#005612',//滾動條背景軌跡顏色,默認#333333
    //railOpacity:0.8,//滾動條背景軌跡透明度,默認0.2
    //allowPageScroll:true,//滾動條滾動到頂部或底部時是否容許頁面滾動,默認false
})

網上找來的資料並無介紹多少與slimscroll.js相關的事件或者方法，這裏，通過本身的嘗試，能夠將一個簡單的樓層滾動邏輯寫成以下：

$(".to8").on("click",function(){
    myScroll.slimscroll({
        scrollTo:'2100px'
    });                        
})
$(".to2").on("click",function(){
    myScroll.slimscroll({
        scrollTo:'300px'
    });                        
})

若是想要滾動到某個具體元素的位置，除了計算出對應元素所對應的定位偏移量，好像就沒有其餘比較好的方法（也多是我沒有找到）。

想詳細瞭解jquery.slimscroll.js，能夠移步到http://plugins.jquery.com/slimScroll/

2.iscroll.js，直接用的5+，據說修復了舊版本中輸入框沒法輸入、橫向滾動時沒法上下滾動頁面等問題，現將本身使用過程當中踩過的坑分享出來：

(1)只有容器元素的第一個子元素能進行滾動，其餘子元素徹底被忽略，html中佈局以下：

<div id="wrapper">
        <div id="scroller">
               <ul>
                    <li></li>
                     ...
                </ul>
                <ul>
                         <li></li>
                          ...
                </ul>
       </div>
</div>

(2)爲滾動容器(#wrapper)增長position:relative或者absolute，這將解決大多數滾動器容器大小計算不正確的問題；

(3)當DOM準備完成後IScroll須要被初始化，因此最保險的方式是在window的onload事件中啓動它，在DOMContentLoaded事件或者inline initialization中作也能夠；

若是你有一個複雜的DOM結構，最好在onload事件以後設置適當的延遲，再去初始化IScroll，一個簡單的實例化代碼以下：

var myScroll=new IScroll("#wrapper",{
    //click:true,
    //preventDefault:false,
    preventDefaultException:{tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|A)$/},
    disableMouse: true,
    disablePointer: true,
    //disableTouch:true,
});

(4)在初始化後你能夠經過options對象訪問myScroll實例的配置信息，即console.log(myScroll.options);

獲取當前的滾動位置，即console.log(myScroll.y);

獲取滾動到底部時的滾動位置，即console.log(myScroll.maxScrollY);

(5)當給scrollTo設置正數參數例如500時，即myScroll.scrollTo(0,-2333)，這會致使整個scroller向下滾動到離wrapper頂部500px的位置，二者之間存在高度爲500px的空白區域;

(6)scrollBy表示滾動到相對於當前位置的某處，即myScroll.scrollBy(0,-2333)，其他同上;

(7)當滾動到指定位置後，鼠標滑輪能夠向下滑，可是不能向上滑，同時$(window).scrollTop()一直顯示爲0，可是點中屏幕能夠拉下上面的內容;

(8)一個簡單的樓層滾動效果能夠寫成：

$(".to8").on("click",function(){
    console.log(myScroll.y);
    myScroll.scrollToElement(".floor8");
    console.log(myScroll.y);
});
$(".to2").on("click",function(){
    console.log(myScroll.y);
    myScroll.scrollToElement(".floor2");
    console.log(myScroll.y);
})    

(9)改變DOM結構後直接設置滾動到指定位置，會出現誤差，因此須要加上refresh方法，例如：

$(".show").on("click",function(){
    $(".spec").toggleClass("active");
    myScroll.refresh();
    myScroll.scrollToElement(".floor9");
})    

(10)分別設置滾動前和滾動後的觸發事件，例如：

//滾動開始前的觸發事件
myScroll.on('beforeScrollStart', function(){
        console.log('開始滾動');    
});            
//滾動結束時的觸發事件
myScroll.on("scrollEnd",function(){
    console.log("已到達指定位置")
})

(11)若是實例化myScroll後沒法點擊<a>標籤，能夠在參數設置中添加preventDefaultException:{tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|A)$/ };

(12)若是一次點擊觸發兩次click事件，阻止冒泡後仍是會出現兩次，解決辦法是在參數設置中添加click:false;

(13)若是實例化myScroll後<input>標籤沒法失焦，解決辦法有：

解封IScroll中的阻止默認事件，即參數設置中添加preventDefault:false，可是這樣一來就會帶來滑動的不流暢性甚至出現卡頓；

解封IScroll中的click事件，即參數設置中添加click:true，可是這樣會致使一次點擊觸發兩次click事件;

引入zepto.js+touch.js文件，在tap事件中設置輸入框的失焦，代碼以下：

$('body').on("tap",function(e){
    if(e.target.nodeName != "INPUT"){
        $('input').blur();
    };
})

(14)若是頁面出現閃爍，直接給scroller添加css3新屬性-webkit-transform:translate3d(0,0,0)，會使瀏覽器啓動硬件加速，還能夠添加-webkit-backface-visibility:hidden來隱藏被旋轉的元素的背面;

(15)若是頁面出現卡頓，解決辦法有：

參數設置中禁用掉一些沒必要要的功能（例如：bounce，momentum，fadeScrollbars，disableMouse，disablePointer）;

加上document.addEventListener('touchmove', function(e){e.preventDefault();},false);

(16)異步加載DOM帶來的滾動問題，解決辦法有：

每次加載後運行myScroll.refresh();

添加定時器，每次循環時獲取新增DOM區域的高度，當獲取的高度等於目標高度時，關掉定時器，而後實例化myScroll