js学习总结----iscroll

先说一下一个小知识点

　　在移动端开发中，使用position：fixed固定定位，很多的手机都支持的不好，尤其是在固定的区域还需要输入内容调取虚拟键盘的时候会出现很多很多的问题

　　解决这个问题，就不能使用固定定位了，而使用局部滚动处理（ISCROLL）

　　例如有下面一个场景，header的高度固定，需要在content里面加入滚动条，如下图

　　

　　下面是具体的代码实现　

//计算content区域的高度（实现竖向局部滚动，我们首先需要把最外层的容器的高度设置好）
        var $content = $('.content');
        $content.css('height',document.documentElement.clientHeight-$('.header')[0].offsetHeight);
        //在数据绑定完成后实现局部滚动
        /*
            var 实例 = new IScroll(需要局部滚动的区域,{参数配置})
            初始化成功后，只对当前容器中的第一个子元素实现了滚动操作
            document.querySelector('.content').querySelector('*')
            [settings]
            scrollbars:true 显示滚动条  默认是不显示的(开启后ISCROLL会默认的向content区域增加一个iScrollVerticalScrollbarDIV，这个div控制的是滚动条，它的样式是position:absolute;所以如果只想让滚动条在容器中，需要给当前的滚动条增加position:relative)
            mouseWheel:true  设置支持鼠标滚轮滚动
            bounce:禁止运动到边界后反弹
            click:true  ISCROLL为了防止滑动过程中的误操作，默认是把click禁止的，如果需要点击，则开启click即可
            [方法]
            myScroll.refresh:当滚动区域的内容发生改变的时候，我们让当前的实例刷新一下，这样的话滚动区域的相关值都会跟着重新计算
            myScroll.scrollToElement([ele],[time]):用多长的时间滚动到具体的元素的某一个位置
            myScroll.scrollTo(x,y,time):滚动到具体的坐标位置
        */
        var myScroll = new IScroll('.content',{
            scrollbars:true,
            mouseWheel:true,
            bounce:false,
            click:true
        })