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