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(); }
补充：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) }
5、iScroll4启用snap时原生滚动被阻止的解决办法
iScroll4启用snap时原生滚动会被阻止，具体表现是拖动snap作用的元素往非snap路径时将无法拖动页面。
官方的解决办法是追加onBeforeScrollStart事件：
onBeforeScrollStart: function (e) { return true; }
这种办法在测试中iOS和原生android设备是没有问题的，但第三方定制系统的设备（如小米，魅族）以及将页面在android应用中打开都会造成滑动非常的卡的现象。这时只要改改iScoll4的源码即可。具体参看 https://github.com/zmathew/iscroll/commit/86acfc09298a999c6f3097ecea736169e00b8e52
onBeforeScrollStart: function (e) { if(!hasTouch) e.preventDefault(); }， ---------------------------------------------------
// Zoom if (that.options.zoom && hasTouch && e.touches.length > 1) { e.preventDefault(); c1 = m.abs(e.touches[0].pageX - e.touches[1].pageX); c2 = m.abs(e.touches[0].pageY - e.touches[1].pageY); --------------------------------------------------- // Lock direction if (that.options.lockDirection) { if (that.absDistX > that.absDistY + 5) { newY = that.y; deltaY = 0; } else if (that.absDistY > that.absDistX + 5) { newX = that.x; deltaX = 0; } } var oldX = that.x; var oldY = that.y; that.moved = true; that._pos(newX, newY); if(hasTouch && (that.x != oldX || that.y != oldY)) { e.preventDefault(); }
xxx是新增加的代码
6. iscoll兼容问题，解决页面整体滑动
document.addEventListener('touchmove', function(e) {
e.preventDefault();
}, false);
这句是解决浏览器与iscoll的兼容问题，加上之后就不会出现滑动屏幕时，整个页面滚动的问题了
7. 固定定位
固定定位不是iscroll的原生用法，而是使用iscroll协助解决固定定位问题。
话说iphone很先进，但就是不支持position:fixed。这下苦了我们了，固定定位怎么解决啊，我们会经常遇到固定标题栏、固定工具栏等情况啊！！
使用iscroll协助解决：首先获取浏览器窗口高度；然后获取固定工具栏的高度；接着将除固定工具栏之外的内容全部放在一个固定区域内，该固定区域的高度=窗口高度-工具栏高度；之后对固定区域使用iscroll。这样，整个html页面的高度正好等于窗口高度，页面级别不会出现滚动，工具栏就一直固定在当前的位置。在固定区域内滑动，可以查看页面其他内容，不会影响工具栏的定位。
8. 鼠标滚轮滚动
iscroll支持在pc端浏览器中使用鼠标滚轮控制区域滚动，但操作起来很不灵敏。这是由于iscroll对鼠标滚轮事件做了拦截，然后缩小了滚轮的滚动距离，详见iscroll4.js源代码608-609行：
wheelDeltaX = e.wheelDeltaX / 12;//控制X轴鼠标滚轮速度
wheelDeltaY = e.wheelDeltaY / 12;//控制Y轴鼠标滚轮速度
iscroll将每次的滚轮距离缩小为系统默认距离的12分之一，难怪滚起来很慢，感觉不灵敏。只需要将12改成1，滚轮的滚动速度就恢复正常了。你也可以根据实际需要设置成其他值。
输入框聚焦不灵敏、无法选择文字
使用了iscroll之后，你会发现点击输入框时不灵敏，经常无法聚焦；页面文字也无法选择和复制。这是由于iscroll要监听鼠标事件和触摸事件来进行滚动，所以禁止了浏览器的默认行为，详见源代码92行：
onBeforeScrollStart: function (e) { e.preventDefault(); },
iscroll不分青红皂白，禁止了浏览器的一切默认行为，导致上述问题。所以我们需要稍作修改：
onBeforeScrollStart: function (e) { var target = e.target; while (target.nodeType != 1) target = target.parentNode; if (target.tagName != ‘SELECT’ && target.tagName != ‘INPUT’ && target.tagName != ‘TEXTAREA’) e.preventDefault(); },
判断触发事件的元素是不是input、select、textarea等表单输入类元素，如果不是就阻止默认行为。这样保证了输入类元素能正确快速聚焦。
在上述修改中追加一个条件 target.tagName != ‘body’或者直接将onBeforeScrollStart修改为null，即可做到鼠标选取文字，但这样的修改会导致iscroll滚动失效或不灵敏，所以无法选取文字这个问题先放一边吧。如你有更好的方法，欢迎回复。
9、iscroll兑现图片的循环滑动
html
<div class="gexian"> </div> <div style="margin:0 auto;"> <div class="bgfont"> <div> <span class="meihong size20">99特惠</span> 超低价无限购 </div> </div> </div> <div id="index-splash-block1" class="index-splash-block" style="position:relative;width:320px;overflow:hidden;"> <div id="scroller_99ii"> <div id="pullDown_99" style="display:none;"> <span class="pullDownIcon"> </span> <span class="pullDownLabel"> Pull down to refresh...</span> </div> <ul id="feature-slide-block1" class="feature-slide-block" style="width:1600px;"> <li class="feature-slide-preview1"> <div class="dtk-list"> <div class="dtk-item"> <a href="/wap/queryPromotionDetail.do?id=M0212060101&appCode=prop&type=990002&merchantType=sale99"> <div class="dazhe"> <span style="font-size:18px;">4.5</span> <span style="font-size:12px;">折</span> </div> <div class="sp_bg"> <img src="http://pic.99wuxian.com/mall/hpdownload/common/mdse/M0212060101_1_micro.png" alt="商品图片" class="sp01" /> </div> </a> </div> <div class="dtk-item"> <a href="/wap/queryPromotionDetail.do?id=M1312051801&appCode=prop&type=990002&merchantType=sale99"> <div class="dazhe"> <span style="font-size:18px;">3.3</span> <span style="font-size:12px;">折</span> </div> <div class="sp_bg"> <img src="http://pic.99wuxian.com/mall/hpdownload/common/mdse/M1312051801_1_micro.png" alt="商品图片" class="sp01" /> </div> </a> </div> </div> </li> <li class="feature-slide-preview1"> <div class="dtk-list"> <div class="dtk-item"> <a href="/wap/queryPromotionDetail.do?id=M0112041201&appCode=prop&type=990002&merchantType=sale99"> <div class="dazhe"> <span style="font-size:18px;">0.9</span> <span style="font-size:12px;">折</span> </div> <div class="sp_bg"> <img src="http://pic.99wuxian.com/mall/hpdownload/common/mdse/M0112041201_1_micro.png" alt="商品图片" class="sp01" /> </div> </a> </div> <div class="dtk-item"> <a href="/wap/queryPromotionDetail.do?id=M1112061502&appCode=prop&type=990002&merchantType=sale99"> <div class="dazhe"> <span style="font-size:18px;">4.0</span> <span style="font-size:12px;">折</span> </div> <div class="sp_bg"> <img src="http://pic.99wuxian.com/mall/hpdownload/common/mdse/M1112061502_1_micro.png" alt="商品图片" class="sp01" /> </div> </a> </div> </div> </li> <li class="feature-slide-preview1"> <div class="dtk-list"> <div class="dtk-item"> <a href="/wap/queryPromotionDetail.do?id=M1112070301&appCode=prop&type=990002&merchantType=sale99"> <div class="dazhe"> <span style="font-size:18px;">2.3</span> <span style="font-size:12px;">折</span> </div> <div class="sp_bg"> <img src="http://pic.99wuxian.com/mall/hpdownload/common/mdse/M1112070301_1_micro.png" alt="商品图片" class="sp01" /> </div> </a> </div> <div class="dtk-item"> <a href="/wap/queryPromotionDetail.do?id=M1312060101&appCode=prop&type=990002&merchantType=sale99"> <div class="dazhe"> <span style="font-size:18px;">3.9</span> <span style="font-size:12px;">折</span> </div> <div class="sp_bg"> <img src="http://pic.99wuxian.com/mall/hpdownload/common/mdse/M1312060101_1_micro.png" alt="商品图片" class="sp01" /> </div> </a> </div> </div> </li> <li class="feature-slide-preview1"> <div class="dtk-list"> <div class="dtk-item"> <a href="/wap/queryPromotionDetail.do?id=M1012051802&appCode=prop&type=990002&merchantType=sale99"> <div class="dazhe"> <span style="font-size:18px;">4.0</span> <span style="font-size:12px;">折</span> </div> <div class="sp_bg"> <img src="http://pic.99wuxian.com/mall/hpdownload/common/mdse/M1012051802_1_micro.png" alt="商品图片" class="sp01" /> </div> </a> </div> <div class="dtk-item"> <a href="/wap/queryPromotionDetail.do?id=M1212042601&appCode=prop&type=990002&merchantType=sale99"> <div class="dazhe"> <span style="font-size:18px;">3.2</span> <span style="font-size:12px;">折</span> </div> <div class="sp_bg"> <img src="http://pic.99wuxian.com/mall/hpdownload/common/mdse/M1212042601_1_micro.png" alt="商品图片" class="sp01" /> </div> </a> </div> </div> </li> <li class="feature-slide-preview1"> <div class="dtk-list"> <div class="dtk-item"> <a href="/wap/queryPromotionDetail.do?id=M0812060801&appCode=prop&type=990002&merchantType=sale99"> <div class="dazhe"> <span style="font-size:18px;">6.1</span> <span style="font-size:12px;">折</span> </div> <div class="sp_bg"> <img src="http://pic.99wuxian.com/mall/hpdownload/common/mdse/M0812060801_1_micro.png" alt="商品图片" class="sp01" /> </div> </a> </div> <div class="dtk-item"> <a href="/wap/queryPromotionDetail.do?id=M1312060102&appCode=prop&type=990002&merchantType=sale99"> <div class="dazhe"> <span style="font-size:18px;">6.6</span> <span style="font-size:12px;">折</span> </div> <div class="sp_bg"> <img src="http://pic.99wuxian.com/mall/hpdownload/common/mdse/M1312060102_1_micro.png" alt="商品图片" class="sp01" /> </div> </a> </div> </div> </li> </ul> <div id="pullUp_99" style="display:none;"> <span class="pullUpIcon"> </span> <span class="pullUpLabel"> Pull up to refresh... </span> </div> </div> <div id="feature-slide-list1" class="feature-slide-list" style="top:160px;position: absolute;"> <a href="javascript:void(0)" onclick="directionRoll(myScroll_99TeHui,'prev',5,0)" id="feature-slide-list-previous1" class="feature-slide-list-previous i_com"> </a> <div id="feature-slide-list-items1" class="feature-slide-list-items"> <a href="javascript:void(0)" class="current"></a> <a href="javascript:void(0)"></a> <a href="javascript:void(0)"></a> <a href="javascript:void(0)"> </a> <a href="javascript:void(0)"></a> </div> <a href="javascript:void(0)" onclick="directionRoll(myScroll_99TeHui,'next',5,0)" id="feature-slide-list-next1" class="feature-slide-list-next i_com"> </a> </div> <div class="cp_more"> <a href="/wap/sale99OrTopicList.do?appCode=prop&type=sale99&cateCode=990002&pager.offset=1&pageSize=18">更多></a> </div> </div> <div style="clear: both; position: relative; overflow: hidden; width: 300px;margin:0px 0px 0px 5px;"> <div class="lantern_slide" id="lantern_slide"> <div class="ls_pic" id="bimg" style="width:300px;"> <div id="pullDown_Topic" style="display:none;"> <span class="pullDownIcon"></span> <span class="pullDownLabel">Pull down to refresh...</span> </div> <ul style="height:60px;"> <li class="dis" name="f"> <a href="/wap/sale99OrTopicList.do?appCode=prop&type=topic&cateCode=9900003&pager.offset=1&pageSize=18"> <img src="http://pic.99wuxian.com/mall/hpdownload/web/20120815181815183.jpg" /> </a> </li> </ul> <div id="pullUp_Topic" style="display:none;"> <span class="pullUpIcon"></span> <span class="pullUpLabel">Pull up to refresh...</span> </div> </div> </div> </div>
js代码
function loadedFor99TeHui(){ if(null!=document.getElementById("index-splash-block1")){ pullDownEl_99 = document.getElementById('pullDown_99'); pullUpEl_99 = document.getElementById('pullUp_99'); pullDownOffset_99 = pullDownEl_99.offsetHeight; pullUpOffset_99 = pullUpEl_99.offsetHeight; myScroll_99TeHui = new iScroll('index-splash-block1', { snap: true, momentum: false, hScrollbar: false, checkDOMChanges:true, onRefresh: function () { if (pullDownEl_99.className.match('loading')) { pullDownEl_99.className = ''; } else if (pullUpEl_99.className.match('loading')) { pullUpEl_99.className = ''; } }, onScrollMove: function () { if (this.x > 5 && !pullDownEl_99.className.match('flip')) { pullDownEl_99.className = 'flip'; this.minScrollX = 0; } else if (this.x < 5 && pullDownEl_99.className.match('flip')) { pullDownEl_99.className = ''; this.minScrollX = -pullDownOffset_99; } else if (this.x < (this.maxScrollX - 5) && !pullUpEl_99.className.match('flip')) { pullUpEl_99.className = 'flip'; this.maxScrollX = this.maxScrollX; } else if (this.x > (this.maxScrollX + 5) && pullUpEl_99.className.match('flip')) { pullUpEl_99.className = ''; this.maxScrollX = pullUpOffset_99; } }, onScrollEnd: function () { document.querySelector('#feature-slide-list-items1 > a.current').className = ''; document.querySelector('#feature-slide-list-items1 > a:nth-child(' + (this.currPageX+1) + ')').className = 'current'; var count=document.querySelectorAll("#feature-slide-list-items1 > a").length; if (pullDownEl_99.className.match('flip')) { pullDownEl_99.className = 'loading'; scrollDirection(this,'next',count); } else if (pullUpEl_99.className.match('flip')) { pullUpEl_99.className = 'loading'; scrollDirection(this,'prev',count); } } }); } } document.addEventListener('DOMContentLoaded',setTimeout(loadedFor99TeHui,100),false);
10.去掉手机地址栏
document.getElementsByTagName("body")[0].style.height = document.documentElement.clientHeight + 70 + "px";
//将body高度设为高出显示区域的高度。 setTimeout(hideURLbar, 0);
function hideURLbar() {
window.scrollTo(0, 1);
document.getElementsByTagName("body")[0].style.height = window.innerHeight + "px";
//隐藏完之后，再将body高度设回满屏高度。
}
11.input等不能输入内容的解决方法
使用iscroll使屏幕上下滑动。发现当使用iscroll后，input等不能输入内容了。这个问题原因在于iscroll需要一直监听用户的touch操作，以便灵敏的做出对应效果，所以它把其余的默认事件屏蔽了，只要在iscroll.js文件中加入如下代码就ok了。
function allowFormsInIscroll(){
[].slice.call(document.querySelectorAll('input, select, button')).forEach(function(el){ el.addEventListener(('ontouchstart' in window)?'touchstart':'mousedown', function(e){ e.stopPropagation(); }) }) } document.addEventListener('DOMContentLoaded', allowFormsInIscroll, false);
或在iscroll4源码里面找到这一行 onBeforeScrollStart: function (e) { e.preventDefault(); }，改成
deName.toLowerCase():(e.target ? e.target.nodeName.toLowerCase():'');if(nodeType !='select'&& nodeType !='option'&& nodeType !='input'&& nodeType!='textarea') e.preventDefault(); }
补充： 左右滚动时，不能正确响应正文上下拉动
在做这种效果时 ，假如这个幻灯片模块只是你页面的一部分，你还需要上下拉动页面去浏览其它内容时，你的手指在这个模块上做上下拨动时，恐怕会没有反应。原因还是和上面一样的，因为屏蔽了默认事件
12. 往iscroll容器内添加内容时，容器闪动的bug
其实病灶在于iscroll使用了太为先进的CSS3属性，可能web webkit对这些属性的支持力度还是不够好。
涉及的两个属性是 translate3d 和 TransitionTimingFunction，或许是这两个属性在列表长度改变时会影响到渲染，所以导致页面闪动，解决办法就是找到源代码的，
has3d = 'WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix()
改成：
has3d = false
和在配置iscroll时，useTransition设置成false就可以了（useTransition默认是false的）。
这样做有一点瑕疵就是滚动起来和原来比没那么流畅了（原来的效果真的是可以媲美原生app的），但是假如你不对比的话，是看不出来了。
不过如果你符合下面的条件，我还是不建议你修改成我这样：
- 即使你不修改，无论你怎么往iscroll容器里面插内容，它都不会闪动，这种情况大多出现在纯文字的列表。假如列表涉及复杂的布局和图片，很多时候会出现闪动bug
- 如果你的web app只是单纯在手机浏览器浏览。translate3d 和 TransitionTimingFunction只是在IOS里的uiwebview支持不成熟，但是在手机上的safari完全没有问题，所以如果你不是用phonegap之类的框架开发混合app，你不需要担心这个问题。
- 只针对android，因为android的webkit暂时还不支持translate3d，iscroll会自动选择不用
13. 过长的滚动内容，导致卡顿和app直接闪退
说白了iscroll都是用js+css3实现的，对浏览器的消耗肯定是可观的，避免无限制的内容加载本身就是web产品应该避免的。
假如无可避免，我们可以尽量减低iscroll对浏览器内存的消耗
- 1)不要使用checkDOMChanges。虽然checkDOMChanges很方便，定时检测容器长度是否变化来refresh，但这也意味着你要消耗一个Interval的内存空间
- 2)隐藏iscroll滚动条，配置时设置hScrollbar和vScrollbar为false。
- 3)不得已的情况下，去掉各种效果，momentum、useTransform、useTransition都设置为false
转载于:https://www.cnblogs.com/JoannaQ/p/3155873.html