1#

iscroll使用注意事项:


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

iscroll使用案例

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

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

  1. onBeforeScrollStart:function(e){ e.preventDefault();},
复制代码
这一行,iSroll禁止了事件的默认行为,导致select,option,textarea等元素无法点击。

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

  1. onBeforeScrollStart:function(e){
  2. var nodeType = e.explicitOriginalTarget ? e.explicitOriginalTarget.nodeName.toLowerCase():(e.target ? e.target.nodeName.toLowerCase():'');
  3.     if(nodeType !='select'&& nodeType !='option'&& nodeType !='input'&& nodeType!='textarea')
  4.                e.preventDefault();
  5. },
复制代码

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

或者,在handleTarget函数方法开始加入:

  1. var theTarget = e.target;
  2. if (theTarget != null && theTarget.tagName == ‘SELECT’) {
  3.     return false;
  4. }
复制代码

第二步:

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

  1. if (e.target.tagName != "SELECT"){
  2.     e.preventDefault();
  3.     e.stopPropagation();
  4. }
复制代码

说明:另外的解决办法见  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  贴出代码

[url=][/url]
  1. //全局的iscroll
  2. var globleScroll = {
  3. helperScroll : null,
  4.     homeScroll : null, //首页的活动iscroll
  5.     myCareScroll : null, //我的关注
  6.     wrapperCardStyle : null, //卡样库
  7.     cardStyleMainMySelf : null,//我的卡样
  8.     brandLetterList : null, //letter brand
  9.     brandFloorList : null,//floor brand
  10.     homePageIndex : 1 ,//记录当前homeScroll滚动到第几个图片了  
  11.     autoScroll : true,//是否是自动滚动
  12.     autoScrollInterval : null, //定时器
  13.     tabBrand : null, //店铺
  14.     pageEventScroll : null, //普通活动
  15.     tabDiscount: null, //优惠信息
  16.     pageEventScrollVip : null //VIP活动
  17. };

  18. globleScroll.homeScroll = new iScroll("wrapperIndexActivity", {
  19.         snap : true,
  20.         momentum : false,
  21.         hScrollbar : false,
  22.         vScrollbar : false,
  23.         onScrollStart :function(){
  24.             //若手动拖动的时候 则clear 定时器  currPageX 归位 自动执行标识改为手动标识
  25.             globleScroll.autoScroll = false;
  26.             globleScroll.homePageIndex = 1;
  27.             clearInterval(globleScroll.autoScrollInterval);
  28.         },
  29.         onScrollEnd : function() {
  30.         $('#indicator > li.active').removeClass("active");
  31.             if(globleScroll.autoScroll){
  32.             $('#indicator > li:nth-child(' + (this.currPageX+1) + ')').addClass("active");
  33.             setHomeActivityIntro(this.currPageX+1, document.querySelector('#activityIntroMain .activityIntro'));
  34.             }else{
  35.             $('#indicator > li:nth-child(' + (this.currPageX+1) + ')').addClass("active");
  36.                 setHomeActivityIntro(this.currPageX+1, document.querySelector('#activityIntroMain .activityIntro'));    
  37.                 autoHomeScroll();
  38.            }
  39.         }
  40.     });
  41.     
  42.     autoHomeScroll();//执行定时器    
  43.     function autoHomeScroll(){//自动滚动代码        
  44.          globleScroll.autoScrollInterval = setInterval(function(){//自动执行代码
  45.              globleScroll.autoScroll = true;//是手动还是自动滚动            
  46.              globleScroll.homeScroll.currPageX += globleScroll.homePageIndex;            
  47.              if(globleScroll.homeScroll.currPageX >= globleScroll.homeScroll.pagesX.length-1){
  48.                 globleScroll.homePageIndex = -1;
  49.              }else if(globleScroll.homeScroll.currPageX <= 0){
  50.                  globleScroll.homePageIndex =1;
  51.              }
  52.              globleScroll.homeScroll.scrollToElement('li:nth-child('+ (globleScroll.homeScroll.currPageX+1)+')',500);
  53.         },3000)
  54.     }
复制代码
[url=][/url]

5、iScroll4启用snap时原生滚动被阻止的解决办法

iScroll4启用snap时原生滚动会被阻止,具体表现是拖动snap作用的元素往非snap路径时将无法拖动页面。

官方的解决办法是追加onBeforeScrollStart事件:

  1. onBeforeScrollStart: function (e) { return true; }
复制代码

这种办法在测试中iOS和原生android设备是没有问题的,但第三方定制系统的设备(如小米,魅族)以及将页面在android应用中打开都会造成滑动非常的卡的现象。这时只要改改iScoll4的源码即可。具体参看  https://github.com/zmathew/iscroll/commit/86acfc09298a999c6f3097ecea736169e00b8e52

[url=][/url]
  1. onBeforeScrollStart: function (e) {
  2.     if(!hasTouch) e.preventDefault();
  3.     },
  4. ---------------------------------------------------
  5. // Zoom
  6. if (that.options.zoom && hasTouch && e.touches.length > 1) {
  7.     e.preventDefault();
  8.     c1 = m.abs(e.touches[0].pageX - e.touches[1].pageX);
  9.     c2 = m.abs(e.touches[0].pageY - e.touches[1].pageY);
  10. ---------------------------------------------------
  11. // Lock direction
  12.         if (that.options.lockDirection) {
  13.             if (that.absDistX > that.absDistY + 5) {
  14.                 newY = that.y;
  15.                 deltaY = 0;
  16.             } else if (that.absDistY > that.absDistX + 5) {
  17.                 newX = that.x;
  18.                 deltaX = 0;
  19.             }
  20.         }
  21.         var oldX = that.x;
  22.         var oldY = that.y;
  23.         that.moved = true;
  24.         that._pos(newX, newY);
  25.         if(hasTouch && (that.x != oldX || that.y != oldY)) {
  26.             e.preventDefault();
  27.         }
复制代码
[url=][/url]

xxx是新增加的代码

6. iscoll兼容问题,解决页面整体滑动

  1. document.addEventListener('touchmove', function(e) {
  2.     e.preventDefault();
  3. }, false);
复制代码

这句是解决浏览器与iscoll的兼容问题,加上之后就不会出现滑动屏幕时,整个页面滚动的问题了

7. 固定定位

固定定位不是iscroll的原生用法,而是使用iscroll协助解决固定定位问题。
话说iphone很先进,但就是不支持positionixed。这下苦了我们了,固定定位怎么解决啊,我们会经常遇到固定标题栏、固定工具栏等情况啊!!
使用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不分青红皂白,禁止了浏览器的一切默认行为,导致上述问题。所以我们需要稍作修改:

  1. onBeforeScrollStart: function (e) {
  2.     var target = e.target;
  3.   while (target.nodeType != 1) target = target.parentNode;
  4.   if (target.tagName != ‘SELECT’ && target.tagName != ‘INPUT’ && target.tagName != ‘TEXTAREA’)
  5.     e.preventDefault();
  6. },
复制代码

    判断触发事件的元素是不是input、select、textarea等表单输入类元素,如果不是就阻止默认行为。这样保证了输入类元素能正确快速聚焦。

在上述修改中追加一个条件 target.tagName != ‘body’或者直接将onBeforeScrollStart修改为null,即可做到鼠标选取文字,但这样的修改会导致iscroll滚动失效或不灵敏,所以无法选取文字这个问题先放一边吧。如你有更好的方法,欢迎回复。

9、iscroll兑现图片的循环滑动

html

[url=][/url]
  1. <div class="gexian">
  2. </div>
  3. <div style="margin:0 auto;">
  4.     <div class="bgfont">
  5.         <div>
  6.             <span class="meihong size20">99特惠</span>
  7.             超低价无限购
  8.         </div>
  9.     </div>
  10. </div>
  11. <div id="index-splash-block1" class="index-splash-block" style="position:relative;width:320px;overflow:hidden;">
  12.     <div id="scroller_99ii">
  13.         <div id="pullDown_99" style="display:none;">
  14.             <span class="pullDownIcon">  </span>
  15.             <span class="pullDownLabel"> Pull down to refresh...</span>
  16.         </div>
  17.         <ul id="feature-slide-block1" class="feature-slide-block" style="width:1600px;">
  18.             <li class="feature-slide-preview1">
  19.                 <div class="dtk-list">
  20.                     <div class="dtk-item">
  21.                         <a href="/wap/queryPromotionDetail.do?id=M0212060101&appCode=prop&type=990002&merchantType=sale99">
  22.                             <div class="dazhe">
  23.                                 <span style="font-size:18px;">4.5</span>
  24.                                 <span style="font-size:12px;">折</span>
  25.                             </div>
  26.                             <div class="sp_bg">
  27.                                 <img src="http://pic.99wuxian.com/mall/hpdownload/common/mdse/M0212060101_1_micro.png" alt="商品图片" class="sp01" />
  28.                             </div>
  29.                         </a>
  30.                     </div>
  31.                     <div class="dtk-item">
  32.                         <a href="/wap/queryPromotionDetail.do?id=M1312051801&appCode=prop&type=990002&merchantType=sale99">
  33.                             <div class="dazhe">
  34.                                 <span style="font-size:18px;">3.3</span>
  35.                                 <span style="font-size:12px;">折</span>
  36.                             </div>
  37.                             <div class="sp_bg">
  38.                                 <img src="http://pic.99wuxian.com/mall/hpdownload/common/mdse/M1312051801_1_micro.png" alt="商品图片" class="sp01" />
  39.                             </div>
  40.                         </a>
  41.                     </div>
  42.                 </div>
  43.             </li>
  44.             <li class="feature-slide-preview1">
  45.                 <div class="dtk-list">
  46.                     <div class="dtk-item">
  47.                         <a href="/wap/queryPromotionDetail.do?id=M0112041201&appCode=prop&type=990002&merchantType=sale99">
  48.                             <div class="dazhe">
  49.                                 <span style="font-size:18px;">0.9</span>
  50.                                 <span style="font-size:12px;">折</span>
  51.                             </div>
  52.                             <div class="sp_bg">
  53.                                 <img src="http://pic.99wuxian.com/mall/hpdownload/common/mdse/M0112041201_1_micro.png" alt="商品图片" class="sp01" />
  54.                             </div>
  55.                         </a>
  56.                     </div>
  57.                     <div class="dtk-item">
  58.                         <a href="/wap/queryPromotionDetail.do?id=M1112061502&appCode=prop&type=990002&merchantType=sale99">
  59.                             <div class="dazhe">
  60.                                 <span style="font-size:18px;">4.0</span>
  61.                                 <span style="font-size:12px;">折</span>
  62.                             </div>
  63.                             <div class="sp_bg">
  64.                                 <img src="http://pic.99wuxian.com/mall/hpdownload/common/mdse/M1112061502_1_micro.png" alt="商品图片" class="sp01" />
  65.                             </div>
  66.                         </a>
  67.                     </div>
  68.                 </div>
  69.             </li>
  70.             <li class="feature-slide-preview1">
  71.                 <div class="dtk-list">
  72.                     <div class="dtk-item">
  73.                         <a href="/wap/queryPromotionDetail.do?id=M1112070301&appCode=prop&type=990002&merchantType=sale99">
  74.                             <div class="dazhe">
  75.                                 <span style="font-size:18px;">2.3</span>
  76.                                 <span style="font-size:12px;">折</span>
  77.                             </div>
  78.                             <div class="sp_bg">
  79.                                 <img src="http://pic.99wuxian.com/mall/hpdownload/common/mdse/M1112070301_1_micro.png"
  80.                                 alt="商品图片" class="sp01" />
  81.                             </div>
  82.                         </a>
  83.                     </div>
  84.                     <div class="dtk-item">
  85.                         <a href="/wap/queryPromotionDetail.do?id=M1312060101&appCode=prop&type=990002&merchantType=sale99">
  86.                             <div class="dazhe">
  87.                                 <span style="font-size:18px;">3.9</span>
  88.                                 <span style="font-size:12px;">折</span>
  89.                             </div>
  90.                             <div class="sp_bg">
  91.                                 <img src="http://pic.99wuxian.com/mall/hpdownload/common/mdse/M1312060101_1_micro.png" alt="商品图片" class="sp01" />
  92.                             </div>
  93.                         </a>
  94.                     </div>
  95.                 </div>
  96.             </li>
  97.             <li class="feature-slide-preview1">
  98.                 <div class="dtk-list">
  99.                     <div class="dtk-item">
  100.                         <a href="/wap/queryPromotionDetail.do?id=M1012051802&appCode=prop&type=990002&merchantType=sale99">
  101.                             <div class="dazhe">
  102.                                 <span style="font-size:18px;">4.0</span>
  103.                                 <span style="font-size:12px;">折</span>
  104.                             </div>
  105.                             <div class="sp_bg">
  106.                                 <img src="http://pic.99wuxian.com/mall/hpdownload/common/mdse/M1012051802_1_micro.png" alt="商品图片" class="sp01" />
  107.                             </div>
  108.                         </a>
  109.                     </div>
  110.                     <div class="dtk-item">
  111.                         <a href="/wap/queryPromotionDetail.do?id=M1212042601&appCode=prop&type=990002&merchantType=sale99">
  112.                             <div class="dazhe">
  113.                                 <span style="font-size:18px;">3.2</span>
  114.                                 <span style="font-size:12px;">折</span>
  115.                             </div>
  116.                             <div class="sp_bg">
  117.                                 <img src="http://pic.99wuxian.com/mall/hpdownload/common/mdse/M1212042601_1_micro.png" alt="商品图片" class="sp01" />
  118.                             </div>
  119.                         </a>
  120.                     </div>
  121.                 </div>
  122.             </li>
  123.             <li class="feature-slide-preview1">
  124.                 <div class="dtk-list">
  125.                     <div class="dtk-item">
  126.                         <a href="/wap/queryPromotionDetail.do?id=M0812060801&appCode=prop&type=990002&merchantType=sale99">
  127.                             <div class="dazhe">
  128.                                 <span style="font-size:18px;">6.1</span>
  129.                                 <span style="font-size:12px;">折</span>
  130.                             </div>
  131.                             <div class="sp_bg">
  132.                                 <img src="http://pic.99wuxian.com/mall/hpdownload/common/mdse/M0812060801_1_micro.png" alt="商品图片" class="sp01" />
  133.                             </div>
  134.                         </a>
  135.                     </div>
  136.                     <div class="dtk-item">
  137.                         <a href="/wap/queryPromotionDetail.do?id=M1312060102&appCode=prop&type=990002&merchantType=sale99">
  138.                             <div class="dazhe">
  139.                                 <span style="font-size:18px;">6.6</span>
  140.                                 <span style="font-size:12px;">折</span>
  141.                             </div>
  142.                             <div class="sp_bg">
  143.                                 <img src="http://pic.99wuxian.com/mall/hpdownload/common/mdse/M1312060102_1_micro.png" alt="商品图片" class="sp01" />
  144.                             </div>
  145.                         </a>
  146.                     </div>
  147.                 </div>
  148.             </li>
  149.         </ul>
  150.         <div id="pullUp_99" style="display:none;">
  151.             <span class="pullUpIcon">
  152.             </span>
  153.             <span class="pullUpLabel">
  154.                 Pull up to refresh...
  155.             </span>
  156.         </div>
  157.     </div>
  158.     <div id="feature-slide-list1" class="feature-slide-list" style="top:160px;position: absolute;">
  159.         <a href="javascript:void(0)" onclick="directionRoll(myScroll_99TeHui,'prev',5,0)"
  160.         id="feature-slide-list-previous1" class="feature-slide-list-previous i_com">
  161.         </a>
  162.         <div id="feature-slide-list-items1" class="feature-slide-list-items">
  163.             <a href="javascript:void(0)" class="current"></a>
  164.             <a href="javascript:void(0)"></a>
  165.             <a href="javascript:void(0)"></a>
  166.             <a href="javascript:void(0)"> </a>
  167.             <a href="javascript:void(0)"></a>
  168.         </div>
  169.         <a href="javascript:void(0)" onclick="directionRoll(myScroll_99TeHui,'next',5,0)"
  170.         id="feature-slide-list-next1" class="feature-slide-list-next i_com">
  171.         </a>
  172.     </div>
  173.     <div class="cp_more">
  174.         <a href="/wap/sale99OrTopicList.do?appCode=prop&type=sale99&cateCode=990002&pager.offset=1&pageSize=18">更多&gt;</a>
  175.     </div>
  176. </div>
  177. <div style="clear: both; position: relative; overflow: hidden; width: 300px;margin:0px 0px 0px 5px;">
  178.     <div class="lantern_slide" id="lantern_slide">
  179.         <div class="ls_pic" id="bimg" style="width:300px;">
  180.             <div id="pullDown_Topic" style="display:none;">
  181.                 <span class="pullDownIcon"></span>
  182.                 <span class="pullDownLabel">Pull down to refresh...</span>
  183.             </div>
  184.             <ul style="height:60px;">
  185.                 <li class="dis" name="f">
  186.                     <a href="/wap/sale99OrTopicList.do?appCode=prop&type=topic&cateCode=9900003&pager.offset=1&pageSize=18">
  187.                         <img src="http://pic.99wuxian.com/mall/hpdownload/web/20120815181815183.jpg"
  188.                         />
  189.                     </a>
  190.                 </li>
  191.             </ul>
  192.             <div id="pullUp_Topic" style="display:none;">
  193.                 <span class="pullUpIcon"></span>
  194.                 <span class="pullUpLabel">Pull up to refresh...</span>
  195.             </div>
  196.         </div>
  197.     </div>
  198. </div>
复制代码
[url=][/url]

js代码

[url=][/url]
  1. function loadedFor99TeHui(){
  2.     if(null!=document.getElementById("index-splash-block1")){
  3.         pullDownEl_99 = document.getElementById('pullDown_99');
  4.         pullUpEl_99 = document.getElementById('pullUp_99');
  5.         pullDownOffset_99 = pullDownEl_99.offsetHeight;
  6.         pullUpOffset_99 = pullUpEl_99.offsetHeight;
  7.         myScroll_99TeHui = new iScroll('index-splash-block1', {
  8.                     snap: true,
  9.                     momentum: false,
  10.                     hScrollbar: false,                    
  11.                     checkDOMChanges:true,
  12.                     onRefresh: function () {
  13.                         if (pullDownEl_99.className.match('loading')) {
  14.                             pullDownEl_99.className = '';
  15.                         } else if (pullUpEl_99.className.match('loading')) {
  16.                             pullUpEl_99.className = '';
  17.                         }
  18.                     },
  19.                     onScrollMove: function () {
  20.                         if (this.x > 5 && !pullDownEl_99.className.match('flip')) {
  21.                             pullDownEl_99.className = 'flip';
  22.                             this.minScrollX = 0;
  23.                         } else if (this.x < 5 && pullDownEl_99.className.match('flip')) {
  24.                             pullDownEl_99.className = '';
  25.                             this.minScrollX = -pullDownOffset_99;
  26.                         } else if (this.x < (this.maxScrollX - 5) && !pullUpEl_99.className.match('flip')) {
  27.                             pullUpEl_99.className = 'flip';
  28.                             this.maxScrollX = this.maxScrollX;
  29.                         } else if (this.x > (this.maxScrollX + 5) && pullUpEl_99.className.match('flip')) {
  30.                             pullUpEl_99.className = '';
  31.                             this.maxScrollX = pullUpOffset_99;
  32.                         }
  33.                     },
  34.                     onScrollEnd: function () {
  35.                         document.querySelector('#feature-slide-list-items1 > a.current').className = '';
  36.                         document.querySelector('#feature-slide-list-items1 > a:nth-child(' + (this.currPageX+1) + ')').className = 'current';
  37.                         var    count=document.querySelectorAll("#feature-slide-list-items1 > a").length;
  38.                         if (pullDownEl_99.className.match('flip')) {
  39.                             pullDownEl_99.className = 'loading';
  40.                             scrollDirection(this,'next',count);        
  41.                         } else if (pullUpEl_99.className.match('flip')) {
  42.                             pullUpEl_99.className = 'loading';                            
  43.                             scrollDirection(this,'prev',count);                            
  44.                         }
  45.                     }
  46.         });
  47.     }        
  48. }
  49. document.addEventListener('DOMContentLoaded',setTimeout(loadedFor99TeHui,100),false);
复制代码
[url=][/url]

  10.去掉手机地址栏

[url=][/url]
  1. document.getElementsByTagName("body")[0].style.height = document.documentElement.clientHeight + 70 + "px";
  2. //将body高度设为高出显示区域的高度。 setTimeout(hideURLbar, 0);
  3. function hideURLbar() {
  4.     window.scrollTo(0, 1);
  5.     document.getElementsByTagName("body")[0].style.height = window.innerHeight + "px";
  6. //隐藏完之后,再将body高度设回满屏高度。
  7. }
复制代码
[url=][/url]

11.input等不能输入内容的解决方法

使用iscroll使屏幕上下滑动。发现当使用iscroll后,input等不能输入内容了。只要在iscroll.js文件中加入如下代码就ok了。按 Ctrl+C 复制代码
按 Ctrl+C 复制代码

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