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