iScroll框架的使用和修改

iScroll 的诞生是因为手机 Webkit 浏览器（iPhone、iPod、Android 和 Pre）本身没有为固定宽度和高度的元素提供滚动内容的方法。这导致了很多网页使用 position:absolute 无法固定页头页尾，并对内容进行滚动的方式。而 iScroll 就是为了解决这个问题。

iscroll使用注意事项：

1, .scroll不要在css里设置高度,不然拖不动
2, #wrapper要设置position:relative,不然滚动条位置不对,不然不在容器内.
3. 如果不显示滚动条, 在.scroller加上 overflow: hidden;
4. 注意css文件是否是动态嵌入,如果是,要延时一下,再new iScroll(), 不然有可能因为没有加载css文件 ,从而.scroller高度为0.不显示滚动条.

iscroll使用案例

补充1：异步加载DOM造成的高度问题造成iScroll不能滚动（http://www.68idc.cn/help/makewebs/html5/2013122363788.html）

原因：动态数据还没有append完成.该showResult 还没有加载完成,就开始 new iScroll("XXXX")了

 /** * 初始化显示结果层的高度,iScroll渲染 */ 
var initScroll = function () { 
    intervalTime = setInterval(function () { 
        var resultContentH = $("#showResult").height(); 
        if (resultContentH > 0) { 
            //判断数据加载完成的条件 
            console.log("此时showResult的高度是:" + resultContentH); 
            $("#showResult").height(resultContentH); 
            setTimeout(function () {
                clearInterval(intervalTime); 
                myScroll = new iScroll('resultContent');
            }, 100);
        } 
    }, 10);
}

1、iscroll遇到Select不能选择下拉的处理

禁止select等页面元素默认事件的解决方法，起因在于_start() function的195行

onBeforeScrollStart:function(e){ e.preventDefault();},

这一行，iSroll禁止了事件的默认行为，导致select，option，textarea等元素无法点击。

解决方法也很简单，只需做一下判断，如下：

onBeforeScrollStart:function(e){
var nodeType = e.explicitOriginalTarget ? e.explicitOriginalTarget.nodeName.toLowerCase():(e.target ? e.target.nodeName.toLowerCase():'');
    if(nodeType !='select'&& nodeType !='option'&& nodeType !='input'&& nodeType!='textarea') 
               e.preventDefault();
},

这样只要你touch的元素是 select || option || input || textarea时，它就不会执行e.preventDefault()，默认的事件就不会被屏蔽了。
如果你有其他不想被屏蔽的元素，可以自己修改，不过需要注意onBeforeScrollStart里的屏蔽默认事件很重要，它是iscroll进行流畅滚动的基础，不要随便的把它去掉，否则你会发现滚动起来很卡顿。

或者，在handleTarget函数方法开始加入：

var theTarget = e.target;
if (theTarget != null && theTarget.tagName == ‘SELECT’) {
    return false;
}

第二步：

在 touchStart函数处即_start()处必须加入:

if (e.target.tagName != "SELECT"){
    e.preventDefault();
    e.stopPropagation();
}

说明：另外的解决办法见 http://stackoverflow.com/questions/5745374/iscroll-4-problem-with-form-select-element-iphone-safari-and-android-browser/5769405#5769405

补充：select元素操作不灵敏或操作后白屏
    使用iscroll后，还有一个较麻烦的问题，就是select元素点击不灵敏（滚动之后点击select，经常无响应）；有时点击有反应了，下拉菜单显示却错位（pc端）；选择一项之后，页面直接变成了空白（iphone、android中）或者页面位置向上偏离，滚动区域位置出现偏离。
    说白了，就是导致select没法用。为此我调试了很久，最后发现了问题所在：iscroll默认使用的是css的transform变形中的translate3d实现区域滚动，每次滚动实际是改变translate3d中的y轴值，实际的dom位置并没有发生变化。translate3d会导致页面的焦点错误，系统级下拉菜单的显示则会导致其出现显示偏离。
    控制滚动模式的代码在67行：useTransform: true。好在iscroll提供了另一种滚动方式，基于绝对定位位置变化的滚动。修改为useTransform: false之后，iscroll就会使用对定位位方式来实现滚动，该方式是我们在web开发中模拟动画的最常用方式，滚动之后dom的实际位置也同步发生了变化，不会出现错位偏离现象。
    在pc端主流浏览器、iphone、android2.2下测试，select问题完美解决。
    不过需要注意，使用对position决定定位后，滚动区的宽度默认会自适应内容宽度，而不是父元素的100%，所以最好将滚动区域宽度设为100%。

来自： http://www.myexception.cn/web/641057.html
注明 : 个人操作的时候，前一个方法不起效，所以又一顿网上乱搜啊！看看后一种方法比较靠谱点，怎么我的问题还是无法解决啊！！！~~~~(>_<)~~~~ 估计iscroll不大适合比较复杂的html和js结构啊。。。

2、增加自定义滑动宽度

iScroll框架默认滑动的宽度为当前获取对象的宽度，当在形如400px宽的对象里有4张图片，我们每次只希望滑动100px的宽度暨一张图片，做如下修改:

1.在that.options里增加一个配置项getScrollW : “”，这里默认为空

2.在refresh方法里找到that.wrapperW = that.wrapper.clientWidth;并修改为that.wrapperW = that.options.getScrollW ? that.options.getScrollW : that.wrapper.clientWidth;

3:在refresh方法里找到that.scrollerW = m.round(that.scroller.offsetWidth * that.scale);并修改为that.scrollerW = m.round((that.options.getScrollW ? that.scroller.offsetWidth – that.wrapper.offsetWidth + that.options.getScrollW : that.scroller.offsetWidth) * that.scale);

增加自定义滑动宽度在iScroll里的修改就完成了，自己在用的时候，在new iScroll里可以按照配置别的参数一样，配置getScrollW 属性，如果为空或没有配置，就默认滑动当前对象的宽度，如果设置了getScrollW:100px，则就每次滑动100px;

3、增加解锁状态pullLock

iScroll默认在加载完后，会阻止浏览器的默认行为，如左右滑动的时候，这个时候会阻止上下滑动，这样对很多文章内容页相对较长的页面显然不适用，修改如下

1:在that.options里增加一个配置项pullLock: true，这里默认为true

2:在_start方法里找到e.preventDefault();,并修改为if(!that.options.pullLock){e.preventDefault();}

3:在_move方法里找到e.preventDefault();,并修改为if(that.options.pullLock){if(newY>=-10 && newY<=10){e.preventDefault();}}else{e.preventDefault();}

增加解锁状态在iScroll里的修改也完成了,自己在new iScroll的时候，增加一个配置项pullLock，如果为true的话，就不会阻止浏览器的默认行为，如果为false的话，就会阻止浏览器的默认行为，这个可以自己根据需求制定。
修改destroy方法

iScroll在初始化的时候，对resize事件做了绑定操作that._bind(RESIZE_EV, window);,但是当在destroy销毁事件的时候，做的解绑that._unbind(RESIZE_EV);没有加window对象，不知道为什么，这个改成that._unbind(RESIZE_EV,window);就行了。

4、iscroll4 实现自动滚动+手动滚动

为了满足傻b客户的需求，需要在webapp里面，实现图片的手动滚动与自动滚动，底部都导航的小圆点，类似于iscroll4官方文档中carousel 贴出代码

//全局的iscroll
var globleScroll = {
helperScroll : null,
    homeScroll : null, //首页的活动iscroll
    myCareScroll : null, //我的关注
    wrapperCardStyle : null, //卡样库
    cardStyleMainMySelf : null,//我的卡样
    brandLetterList : null, //letter brand
    brandFloorList : null,//floor brand
    homePageIndex : 1 ,//记录当前homeScroll滚动到第几个图片了  
    autoScroll : true,//是否是自动滚动
    autoScrollInterval : null, //定时器
    tabBrand : null, //店铺
    pageEventScroll : null, //普通活动
    tabDiscount: null, //优惠信息
    pageEventScrollVip : null //VIP活动
};

 globleScroll.homeScroll = new iScroll("wrapperIndexActivity", {
        snap : true,
        momentum : false,
        hScrollbar : false,
        vScrollbar : false,
        onScrollStart :function(){
            //若手动拖动的时候 则clear 定时器  currPageX 归位 自动执行标识改为手动标识
            globleScroll.autoScroll = false;
            globleScroll.homePageIndex = 1;
            clearInterval(globleScroll.autoScrollInterval);
        },
        onScrollEnd : function() {
        $('#indicator > li.active').removeClass("active");
            if(globleScroll.autoScroll){
            $('#indicator > li:nth-child(' + (this.currPageX+1) + ')').addClass("active");
            setHomeActivityIntro(this.currPageX+1, document.querySelector('#activityIntroMain .activityIntro'));
            }else{
            $('#indicator > li:nth-child(' + (this.currPageX+1) + ')').addClass("active");
                setHomeActivityIntro(this.currPageX+1, document.querySelector('#activityIntroMain .activityIntro'));    
                autoHomeScroll();
           }
        }
    });
    
    autoHomeScroll();//执行定时器    
    function autoHomeScroll(){//自动滚动代码        
         globleScroll.autoScrollInterval = setInterval(function(){//自动执行代码
             globleScroll.autoScroll = true;//是手动还是自动滚动             
             globleScroll.homeScroll.currPageX += globleScroll.homePageIndex;             
             if(globleScroll.homeScroll.currPageX >= globleScroll.homeScroll.pagesX.length-1){
                globleScroll.homePageIndex = -1;
             }else if(globleScroll.homeScroll.currPageX <= 0){
                 globleScroll.homePageIndex =1;
             }
             globleScroll.homeScroll.scrollToElement('li:nth-child('+ (globleScroll.homeScroll.currPageX+1)+')',500);
        },3000)
    }