2394人阅读
JS（JQuery）（4）
注：转载自
特此说明。
iScroll 的诞生是因为手机 Webkit 浏览器（iPhone、iPod、Android 和 Pre）本身没有为固定宽度和高度的元素提供滚动内容的方法。这导致了很多网页使用 position:absolute 无法固定页头页尾，并对内容进行滚动的方式。而 iScroll 就是为了解决这个问题。
iscroll使用注意事项：
1, .scroll不要在css里设置高度,不然拖不动2, #wrapper要设置position:relative,不然滚动条位置不对,不然不在容器内.3. 如果不显示滚动条, 在.scroller加上 overflow:4. 注意css文件是否是动态嵌入,如果是,要延时一下,再new iScroll(), 不然有可能因为没有加载css文件 ,从而.scroller高度为0.不显示滚动条.5.属性设置&&&&&&&&&& useTransition: false,
&&&&&&&&&& momentum: false,
&&&&&&&&&& useTransform: false，//上面3个不设置为false会影响页面的渲染断层的问题，特别对已处理比较慢的移动或pad端
&&&&&&&&&& hScrollbar:false,
&&&&&&&&&& vScrollbar:false,
&&&&&&&&&& lockDirection:true,
&&&&&&&&&& hScroll :false,
iscroll使用案例
补充1： 异步加载DOM造成的高度问题造成iScroll不能滚动（/help/makewebs/html5/8.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');
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.
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%。
来自： 注明 : 个人操作的时候，前一个方法不起效，所以又一顿网上乱搜啊！看看后一种方法比较靠谱点，怎么我的问题还是无法解决啊！！！~~~~(&_&)~~~~ 估计iscroll不大适合比较复杂的html和js结构啊。。。
2、增加自定义滑动宽度
iScroll框架默认滑动的宽度为当前获取对象的宽度，当在形如400px宽的对象里有4张图片，我们每次只希望滑动100px的宽度暨一张图片，做如下修改:
1.在that.options里增加一个配置项getScrollW : “”，这里默认为空
2.在refresh方法里找到that.wrapperW = that.wrapper.clientW并修改为that.wrapperW = that.options.getScrollW ? that.options.getScrollW : that.wrapper.clientW
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，则就每次滑动100
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'));
$('#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.homePageI
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);
5、iScroll4启用snap时原生滚动被阻止的解决办法
iScroll4启用snap时原生滚动会被阻止，具体表现是拖动snap作用的元素往非snap路径时将无法拖动页面。
官方的解决办法是追加onBeforeScrollStart事件：
onBeforeScrollStart: function (e) { return true; }
这种办法在测试中iOS和原生android设备是没有问题的，但第三方定制系统的设备（如小米，魅族）以及将页面在android应用中打开都会造成滑动非常的卡的现象。这时只要改改iScoll4的源码即可。具体参看
onBeforeScrollStart: function (e) {
if(!hasTouch) e.preventDefault();
---------------------------------------------------
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.
　　while (target.nodeType != 1) target = target.parentN
　　if (target.tagName != ‘SELECT’ && target.tagName != ‘INPUT’ && target.tagName != ‘TEXTAREA’)
　　　　e.preventDefault();
判断触发事件的元素是不是input、select、textarea等表单输入类元素，如果不是就阻止默认行为。这样保证了输入类元素能正确快速聚焦。
在上述修改中追加一个条件 target.tagName != ‘body’或者直接将onBeforeScrollStart修改为null，即可做到鼠标选取文字，但这样的修改会导致iscroll滚动失效或不灵敏，所以无法选取文字这个问题先放一边吧。如你有更好的方法，欢迎回复。
9、iscroll兑现图片的循环滑动
&div class=&gexian&&
&div style=&margin:0&&
&div class=&bgfont&&
&span class=&meihong size20&&99特惠&/span&
超低价无限购
&div id=&index-splash-block1& class=&index-splash-block& style=&position:width:320overflow:&&
&div id=&scroller_99ii&&
&div id=&pullDown_99& style=&display:&&
&span class=&pullDownIcon&&
&span class=&pullDownLabel&& Pull down to refresh...&/span&
&ul id=&feature-slide-block1& class=&feature-slide-block& style=&width:1600&&
&li class=&feature-slide-preview1&&
&div class=&dtk-list&&
&div class=&dtk-item&&
&a href=&/wap/queryPromotionDetail.do?id=M&appCode=prop&type=990002&merchantType=sale99&&
&div class=&dazhe&&
&span style=&font-size:18&&4.5&/span&
&span style=&font-size:12&&折&/span&
&div class=&sp_bg&&
&img src=&/mall/hpdownload/common/mdse/M_1_micro.png& alt=&商品图片& class=&sp01& /&
&div class=&dtk-item&&
&a href=&/wap/queryPromotionDetail.do?id=M&appCode=prop&type=990002&merchantType=sale99&&
&div class=&dazhe&&
&span style=&font-size:18&&3.3&/span&
&span style=&font-size:12&&折&/span&
&div class=&sp_bg&&
&img src=&/mall/hpdownload/common/mdse/M_1_micro.png& alt=&商品图片& class=&sp01& /&
&li class=&feature-slide-preview1&&
&div class=&dtk-list&&
&div class=&dtk-item&&
&a href=&/wap/queryPromotionDetail.do?id=M&appCode=prop&type=990002&merchantType=sale99&&
&div class=&dazhe&&
&span style=&font-size:18&&0.9&/span&
&span style=&font-size:12&&折&/span&
&div class=&sp_bg&&
&img src=&/mall/hpdownload/common/mdse/M_1_micro.png& alt=&商品图片& class=&sp01& /&
&div class=&dtk-item&&
&a href=&/wap/queryPromotionDetail.do?id=M&appCode=prop&type=990002&merchantType=sale99&&
&div class=&dazhe&&
&span style=&font-size:18&&4.0&/span&
&span style=&font-size:12&&折&/span&
&div class=&sp_bg&&
&img src=&/mall/hpdownload/common/mdse/M_1_micro.png& alt=&商品图片& class=&sp01& /&
&li class=&feature-slide-preview1&&
&div class=&dtk-list&&
&div class=&dtk-item&&
&a href=&/wap/queryPromotionDetail.do?id=M&appCode=prop&type=990002&merchantType=sale99&&
&div class=&dazhe&&
&span style=&font-size:18&&2.3&/span&
&span style=&font-size:12&&折&/span&
&div class=&sp_bg&&
&img src=&/mall/hpdownload/common/mdse/M_1_micro.png&
alt=&商品图片& class=&sp01& /&
&div class=&dtk-item&&
&a href=&/wap/queryPromotionDetail.do?id=M&appCode=prop&type=990002&merchantType=sale99&&
&div class=&dazhe&&
&span style=&font-size:18&&3.9&/span&
&span style=&font-size:12&&折&/span&
&div class=&sp_bg&&
&img src=&/mall/hpdownload/common/mdse/M_1_micro.png& alt=&商品图片& class=&sp01& /&
&li class=&feature-slide-preview1&&
&div class=&dtk-list&&
&div class=&dtk-item&&
&a href=&/wap/queryPromotionDetail.do?id=M&appCode=prop&type=990002&merchantType=sale99&&
&div class=&dazhe&&
&span style=&font-size:18&&4.0&/span&
&span style=&font-size:12&&折&/span&
&div class=&sp_bg&&
&img src=&/mall/hpdownload/common/mdse/M_1_micro.png& alt=&商品图片& class=&sp01& /&
&div class=&dtk-item&&
&a href=&/wap/queryPromotionDetail.do?id=M&appCode=prop&type=990002&merchantType=sale99&&
&div class=&dazhe&&
&span style=&font-size:18&&3.2&/span&
&span style=&font-size:12&&折&/span&
&div class=&sp_bg&&
&img src=&/mall/hpdownload/common/mdse/M_1_micro.png& alt=&商品图片& class=&sp01& /&
&li class=&feature-slide-preview1&&
&div class=&dtk-list&&
&div class=&dtk-item&&
&a href=&/wap/queryPromotionDetail.do?id=M&appCode=prop&type=990002&merchantType=sale99&&
&div class=&dazhe&&
&span style=&font-size:18&&6.1&/span&
&span style=&font-size:12&&折&/span&
&div class=&sp_bg&&
&img src=&/mall/hpdownload/common/mdse/M_1_micro.png& alt=&商品图片& class=&sp01& /&
&div class=&dtk-item&&
&a href=&/wap/queryPromotionDetail.do?id=M&appCode=prop&type=990002&merchantType=sale99&&
&div class=&dazhe&&
&span style=&font-size:18&&6.6&/span&
&span style=&font-size:12&&折&/span&
&div class=&sp_bg&&
&img src=&/mall/hpdownload/common/mdse/M_1_micro.png& alt=&商品图片& class=&sp01& /&
&div id=&pullUp_99& style=&display:&&
&span class=&pullUpIcon&&
&span class=&pullUpLabel&&
Pull up to refresh...
&div id=&feature-slide-list1& class=&feature-slide-list& style=&top:160position:&&
&a href=&javascript:void(0)& onclick=&directionRoll(myScroll_99TeHui,'prev',5,0)&
id=&feature-slide-list-previous1& class=&feature-slide-list-previous i_com&&
&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&
&a href=&javascript:void(0)& onclick=&directionRoll(myScroll_99TeHui,'next',5,0)&
id=&feature-slide-list-next1& class=&feature-slide-list-next i_com&&
&div class=&cp_more&&
&a href=&/wap/sale99OrTopicList.do?appCode=prop&type=sale99&cateCode=990002&pager.offset=1&pageSize=18&&更多&&/a&
&div style=&clear: position: overflow: width: 300margin:0px 0px 0px 5&&
&div class=&lantern_slide& id=&lantern_slide&&
&div class=&ls_pic& id=&bimg& style=&width:300&&
&div id=&pullDown_Topic& style=&display:&&
&span class=&pullDownIcon&&&/span&
&span class=&pullDownLabel&&Pull down to refresh...&/span&
&ul style=&height:60&&
&li class=&dis& name=&f&&
&a href=&/wap/sale99OrTopicList.do?appCode=prop&type=topic&cateCode=9900003&pager.offset=1&pageSize=18&&
&img src=&/mall/hpdownload/web/15183.jpg&
&div id=&pullUp_Topic& style=&display:&&
&span class=&pullUpIcon&&&/span&
&span class=&pullUpLabel&&Pull up to refresh...&/span&
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.offsetH
pullUpOffset_99 = pullUpEl_99.offsetH
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';
count=document.querySelectorAll(&#feature-slide-list-items1 & a&).
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使用了太为先进的属性，可能 webkit对这些属性的支持力度还是不够好。
涉及的两个属性是 translate3d 和 TransitionTimingFunction，或许是这两个属性在列表长度改变时会影响到渲染，所以导致页面闪动，解决办法就是找到的，
has3d = 'WebKitMatrix' in
&& 'm11' in new WebKitCSSMatrix()
has3d = false
和在配置iscroll时，useTransition设置成false就可以了（useTransition默认是false的）。
这样做有一点瑕疵就是滚动起来和原来比没那么流畅了（原来的效果真的是可以媲美原生app的），但是假如你不对比的话，是看不出来了。
不过如果你符合下面的条件，我还是不建议你修改成我这样：
即使你不修改，无论你怎么往iscroll容器里面插内容，它都不会闪动，这种情况大多出现在纯文字的列表。假如列表涉及复杂的布局和图片，很多时候会出现闪动bug如果你的web app只是单纯在浏览。translate3d 和 TransitionTimingFunction只是在I里的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
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：15596次
排名：千里之外
(1)(2)(1)(1)(1)(1)(1)(2)(3)(3)(1)