web app开发利器 - iscroll4 解决方案

• 存在便是道理,iscroll会诞生,主要是由于不管是在iphone、ipod、android 或是更早前的移动webkit都没有提供一种原生的方式来支持在一个固定高度的容器内滚动内容,
• 这个不幸的规则致使全部web-app要模拟成app的样子时，只能由一个绝对定位的header 或是footer再加上一个能够内容的滚动的中间区域组成。
• 幸运的是移动webkit提供了一种强大的硬件加速的CSS属性，这个属性能够用来模拟这个缺失的功能，Iscroll从这里开始了前进之路，可是没有不带刺的玫瑰。让内容滚动像原生方式通常比想象中要难
• 兼容万恶的IE6同样，做者但愿经过写一个控件，让全部web浏览器支持这种滚动，因而iscroll4应运而生。

在解决了兼容性的问题以外，它还提供了需求许多交互的解决方案，如：

    （1）缩放（Pinch/Zoom）

    （2）拉动刷新（Pull up/down to refresh）

    （3）速度和性能提高

    （4）精确捕捉元素

    （5）自定义滚动条

IOS5 已经可以支持区域滚动了。可是andriod4 仍是不行..

overflow:scroll;  
-webkit-overflow-scrolling:touch;

 

已知的兼容bugs

 

区域滚动：

• 安卓的2x. 元素不支持 overflow:scroll （android自带浏览器） 4.x以上都支持
• ios 5如下好像也不支持

固定定位:

• 话说iphone很先进，但就是不支持position:fixed, 真奇葩

---

实际项目开发中使用iscroll遇到的问题：

大概说下解决的方案,你不必定遇到,遇到了至少有个参考~

• iscroll支持在pc端浏览器中使用鼠标滚轮控制区域滚动，但操做起来很不灵敏
• 在iscroll4的滚动容器范围内，点击input框、select等表单元素时没有响应

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()，默认的事件就不会被屏蔽了

 

---

 

• 往iscroll容器内添加内容时，容器闪动的bug                              （实际遇到了,已解决）
• • 作上拉加载更多内容的时候，确定须要把新的内容插入到容器内，这时发现有时容器会出现闪动，一开始认为是insert进去的内容太多，后来又以为是否是由于里面布局用了float的缘由致使从新渲染，最后统统排除
  • has3d = 'WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix()
  • has3d = false
  • 和在配置iscroll时，useTransition设置成false就能够了（useTransition默认是false的）。

 

---

 

 

• 过长的滚动内容，致使卡顿和app直接闪退 （实际遇到了,已解决）
  • 说白了iscroll都是用js+css3实现的，对浏览器的消耗确定是可观的，避免无限制的内容加载自己就是web产品应该避免的。
  • 假如无可避免，咱们能够尽可能减低iscroll对浏览器内存的消耗
  • 1)不要使用checkDOMChanges。虽然checkDOMChanges很方便，定时检测容器长度是否变化来refresh，但这也意味着你要消耗一个Interval的内存空间
  • 2)隐藏iscroll滚动条，配置时设置hScrollbar和vScrollbar为false。
  • 3)不得已的状况下，去掉各类效果，momentum、useTransform、useTransition都设置为false

 

---

 

在手机中作滑动条,有几百条下啦列表的是时候，上下滑动爆卡（实际遇到了,已解决）

• 检查缘由发现跟布局有很大的关系,布局的子元素li都用了绝对定位,去掉就OK了,有此可见定位也是会影响能行滴

 

---

 

左右滚动时，不能正确响应正文上下拉动                                  （实际遇到了,已解决）

• 在作这种效果时 ，假如这个幻灯片模块只是你页面的一部分，你还须要上下拉动页面去浏览其它内容时，你的手指在这个模块上作上下拨动时，恐怕会没有反应。缘由仍是和问题1同样的，由于屏蔽了默认事件。
• 完美的解决方法是没有的，若是把 e.preventDefault() 去掉，幻灯片的滚动效果就会大打折扣，并且有时用户上下拨动的操做会被误操做成幻灯片的滚动。因此在效果仍是体验上，你们仍是本身选择吧。在技术上解决不了的问题，我认为仍是多和产品和UI沟通比较好，共同协商一个良好的方案。

 

---

 

• 4.1.9版本中,mouseout事件，2次触发end事件                        （实际遇到了,已解决）

            呵呵，这个我改了源码，添加了一个flag处理的，具体在

_start 方法中
that.swipe = false;

_mouseout 方法中
        _mouseout:function (e) {
            var t = e.relatedTarget;    

            if(this.swipe){
                return;
            }

 

---

• 4.1.9版本中,preventDefault没有妥善处理,致使svg不可选的问题 （实际遇到了,已解决）

如图把  打字累了

 

---

 

附上：运用webkit绘制渲染页面原理解决iscroll4闪动的问题

 

下章开始源码分析,敬请期待~~