1.無法滑動的問題
需要檢查iscroll.js文件加載上沒有，如果加載上檢查一下它和jquery文件加載的先后順序。wrapper的position必須得寫，bottom也必須得寫。
2.滑不上去的問題
wrapper的height設置成了100%。所以出現這個問題，把這個屬性去掉了好了
3.頁面滑動不流暢（這樣是暫時行可以，還沒找到更好的解決辦法）
#scroller {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
}
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
}
4.點擊input框、select等表單元素時沒有響應，這個問題原因在於iscroll需要一直監聽用戶的touch操作，以便靈敏的做出對應效果，所以它把其余的默認事件屏蔽了，解決的方法是，在iscroll4源碼里面找到這一行，
onBeforeScrollStart: function (e) { e.preventDefault(); }
然后把它改成：
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進行流暢滾動的基礎，不要隨便的把它去掉，否則你會發現滾動起來很卡頓。
5.Iscroll異步加載DOM造成滑動不上去的問題
我實在ajax執行完成以后重新加載一次iscroll，myScroll.refresh();
用iscroll5實現的頁面初始化加載到頁面最底部，點擊一個按鈕最底部加載一條數據，並且實現下拉加載更多的效果，iscroll-probe.js是關鍵，
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <title>iScroll demo: probe</title> <script type="text/javascript" src="../build/iscroll-probe.js"></script> <script src="jquery-2.0.2.min.js"></script> <script type="text/javascript"> var myScroll; var pullDownEl, pullDownL; var pullUpEl, pullUpL; var Downcount = 0 ,Upcount = 0; var loadingStep = 0;//加載狀態0默認，1顯示加載狀態，2執行加載數據，只有當為0時才能再次加載，這是防止過快拉動刷新 function pullDownAction() {//下拉事件 setTimeout(function() { alert('ook') pullDownEl.removeClass('loading'); pullDownL.html('下拉顯示更多...'); pullDownEl['class'] = pullDownEl.attr('class'); pullDownEl.attr('class','').hide(); myScroll.refresh(); loadingStep = 0; }, 1000); //1秒 } function pullUpAction() {//上拉事件 setTimeout(function() { /* var el, li, i; el = $('#add'); for (i = 0; i < 3; i++) { li = $("<li></li>"); Upcount++; li.text('new Add ' + Upcount + " ！"); el.append(li); } */ pullUpEl.removeClass('loading'); pullUpL.html('上拉顯示更多...'); pullUpEl['class'] = pullUpEl.attr('class'); pullUpEl.attr('class','').hide(); myScroll.refresh(); loadingStep = 0; }, 1000); } function loaded() { pullDownEl = $('#pullDown'); pullDownL = pullDownEl.find('.pullDownLabel'); pullDownEl['class'] = pullDownEl.attr('class'); pullDownEl.attr('class','').hide(); pullUpEl = $('#pullUp'); pullUpL = pullUpEl.find('.pullUpLabel'); pullUpEl['class'] = pullUpEl.attr('class'); pullUpEl.attr('class','').hide(); myScroll = new IScroll('#content', { probeType: 2, scrollbars: true,//有滾動條 mouseWheel: true,//允許滑輪滾動 fadeScrollbars: true,//滾動時顯示滾動條，默認影藏，並且是淡出淡入效果 bounce:true,//邊界反彈 interactiveScrollbars:true,//滾動條可以拖動 shrinkScrollbars:'scale',// 當滾動邊界之外的滾動條是由少量的收縮。'clip' or 'scale'. click: true ,// 允許點擊事件 keyBindings:true,//允許使用按鍵控制 momentum:true// 允許有慣性滑動 }); myScroll.scrollToElement(document.querySelector('#scroller li:last-child')) //頁面初始化顯示最后一條數據 //滾動時 myScroll.on('scroll', function(){ if(loadingStep == 0 && !pullDownEl.attr('class').match('flip|loading') && !pullUpEl.attr('class').match('flip|loading')){ if (this.y > 5) { //下拉刷新效果 pullDownEl.attr('class',pullUpEl['class']) pullDownEl.show(); myScroll.refresh(); pullDownEl.addClass('flip'); loadingStep = 1; }else if (this.y < (this.maxScrollY - 5)) { //上拉刷新效果 pullUpEl.attr('class',pullUpEl['class']) pullUpEl.show(); myScroll.refresh(); pullUpEl.addClass('flip'); loadingStep = 1; } } }); //滾動完畢 myScroll.on('scrollEnd',function(){ if(loadingStep == 1){ if (pullUpEl.attr('class').match('flip|loading')) { pullUpEl.removeClass('flip').addClass('loading...'); pullUpL.html('Loading...'); loadingStep = 2; pullUpAction(); }else if(pullDownEl.attr('class').match('flip|loading')){ pullDownEl.removeClass('flip').addClass('loading...'); pullDownL.html('Loading...'); loadingStep = 2; pullDownAction(); } } }); } document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); $(function(){ $('#footer a').click(function(){ var el, li, i; el = $('#add'); for (i = 0; i < 3; i++) { li = $("<li></li>"); Upcount++; li.text('new Add ' + Upcount + " ！"); el.append(li); } myScroll.refresh(); }) $('.delete').click(function(){ $('#add li:last-child').remove(); myScroll.refresh(); }) }) </script> <style type="text/css"> * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { -ms-touch-action: none; } body,ul,li { padding: 0; margin: 0; border: 0; } body { font-size: 12px; font-family: ubuntu, helvetica, arial; overflow: hidden; /* this is important to prevent the whole page to bounce */ } #header { position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 45px; line-height: 45px; background: #CD235C; padding: 0; color: #eee; font-size: 20px; text-align: center; font-weight: bold; } #footer { position: absolute; z-index: 2; bottom: 0; left: 0; width: 100%; height: 48px; background: #444; padding: 0; border-top: 1px solid #444; } #footer a { width: 50%; display: block; float: left; text-align: center; line-height: 48px; color: #fff; font-size: 16px } #content { position: absolute; z-index: 1; top: 45px; bottom: 48px; left: 0; width: 100%; background: #ccc; overflow: hidden; } #scroller { position: absolute; z-index: 1; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; -o-text-size-adjust: none; text-size-adjust: none; } #scroller ul { list-style: none; padding: 0; margin: 0; width: 100%; text-align: left; } #scroller li { padding: 0 10px; height:100px; line-height: 40px; border-bottom: 1px solid #ccc; border-top: 1px solid #fff; background-color: #fafafa; font-size: 14px; } #pullDown, #pullUp { background:#fff; height:40px; line-height:40px; padding:5px 10px; border-bottom:1px solid #ccc; font-weight:bold; font-size:14px; color:#888; } #pullDown .pullDownIcon, #pullUp .pullUpIcon { display:block; float:left; width:40px; height:40px; background:url(pull-icon@2x.png) 0 0 no-repeat; -webkit-background-size:40px 80px; background-size:40px 80px; -webkit-transition-property:-webkit-transform; -webkit-transition-duration:250ms; } #pullDown .pullDownIcon { -webkit-transform:rotate(0deg) translateZ(0); } #pullUp .pullUpIcon { -webkit-transform:rotate(-180deg) translateZ(0); } #pullDown.flip .pullDownIcon { -webkit-transform:rotate(-180deg) translateZ(0); } #pullUp.flip .pullUpIcon { -webkit-transform:rotate(0deg) translateZ(0); } #pullDown.loading .pullDownIcon, #pullUp.loading .pullUpIcon { background-position:0 100%; -webkit-transform:rotate(0deg) translateZ(0); -webkit-transition-duration:0ms; -webkit-animation-name:loading; -webkit-animation-duration:2s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear; } @-webkit-keyframes loading { from { -webkit-transform:rotate(0deg) translateZ(0); } to { -webkit-transform:rotate(360deg) translateZ(0); } } </style> </head> <body onload="loaded()"> <div id="header"><a href="javascript:myScroll.scrollToElement(document.querySelector('#scroller li:last-child'))">Scroll</a></div> <div id="content"> <div id="scroller"> <div id="pullDown" class="ub ub-pc c-gra"> <div class="pullDownIcon"></div> <div class="pullDownLabel">Loading...</div> </div> <ul id="add"> <li><a href="#">Scroll to element 10</a></li> <li><input type="text" value="測試" id="test" disabled="disabled"></li> <li>Pretty row 1</li> <li>Pretty row 2</li> <li>Pretty row 3</li> <li>Pretty row 4</li> <li>Pretty row 5</li> <li>Pretty row 6</li> <li>Pretty row 7</li> <li>Pretty row 8</li> <li>Pretty row 9</li> <li>Pretty row 10</li> </ul> <div id="pullUp" class="ub ub-pc c-gra"> <div class="pullUpIcon"></div> <div class="pullUpLabel">上拉顯示更多...</div> </div> </div> </div> <div id="footer"> <a href="javascript:myScroll.scrollToElement(document.querySelector('#scroller li:last-child'))">添加</a> <a style="display:block;cursor:pointer;" class="delete">刪除</a> </div> </body> </html>
