1.在iscroll4的滚动容器范围内,点击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进行流畅滚动的基础,不要随便的把它去掉,否则你会发现滚动起来很卡顿。

2.往iscroll容器内添加内容时,容器闪动的bug

我在做上拉加载更多内容的时候,肯定需要把新的内容插入到容器内,这时发现有时容器会出现闪动,一开始认为是insert进去的内容太多,后来又觉得是不是因为里面布局用了float的原因导致重新渲染,最后通通排除。

其实病灶在于iscroll使用了太为先进的CSS3属性,可能web webkit对这些属性的支持力度还是不够好。

涉及的两个属性是  translate3d 和 TransitionTimingFunction,或许是这两个属性在列表长度改变时会影响到渲染,所以导致页面闪动,解决办法就是找到源代码的,

has3d = 'WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix()

改成:
     has3d = false

和在配置iscroll时,useTransition设置成false就可以了(useTransition默认是false的)。

这样做有一点瑕疵就是滚动起来和原来比没那么流畅了(原来的效果真的是可以媲美原生app的),但是假如你不对比的话,是看不出来了。

在效果和体验上面选择,我更看重体验。

不过如果你符合下面的条件,我还是不建议你修改成我这样:

1)即使你不修改,无论你怎么往iscroll容器里面插内容,它都不会闪动,这种情况大多出现在纯文字的列表。假如列表涉及复杂的布局和图片,很多时候会出现闪动bug

2)如果你的web app只是单纯在手机浏览器浏览。translate3d 和 TransitionTimingFunction只是在IOS里的uiwebview支持不成熟,但是在手机上的safari完全没有问题,所以如果你不是用phonegap之类的框架开发混合app,你不需要担心这个问题。

3)只针对android,因为android的webkit暂时还不支持translate3d,iscroll会自动选择不用。

3.过长的滚动内容,导致卡顿和app直接闪退

说白了iscroll都是用js+css3实现的,对浏览器的消耗肯定是可观的,避免无限制的内容加载本身就是web产品应该避免的。

假如无可避免,我们可以尽量减低iscroll对浏览器内存的消耗

1)不要使用checkDOMChanges。虽然checkDOMChanges很方便,定时检测容器长度是否变化来refresh,但这也意味着你要消耗一个Interval的内存空间

2)隐藏iscroll滚动条,配置时设置hScrollbar和vScrollbar为false。

3)不得已的情况下,去掉各种效果,momentum、useTransform、useTransition都设置为false

4.左右滚动时,不能正确响应正文上下拉动

在做这种效果时 ,假如这个幻灯片模块只是你页面的一部分,你还需要上下拉动页面去浏览其它内容时,你的手指在这个模块上做上下拨动时,恐怕会没有反应。原因还是和问题1一样的,因为屏蔽了默认事件。

完美的解决方法是没有的,如果把 e.preventDefault() 去掉,幻灯片的滚动效果就会大打折扣,而且有时用户上下拨动的操作会被误操作成幻灯片的滚动。所以在效果还是体验上,大家还是自己选择吧。在技术上解决不了的问题,我认为还是多和产品和UI沟通比较好,共同协商一个良好的方案。

基本的心得就是这些拉,希望对大家有帮助。(转)

iScroll 4.2.5 中文API

http://www.gafish.net/api/iScroll.html  

  

使用iscroll4可能会遇到的问题(转:记录)的更多相关文章

  1. history显示历史操作记录,并显示操作时间

    在查看历史的操作记录有两种方式1.在用户的目录下的.bash_history文件中[root@node1 ~]# vi ~/.bash_history rebootvi /etc/sysconfig/ ...

  2. 前端学HTTP之摘要认证

    前面的话 上一篇介绍的基本认证便捷灵活,但极不安全.用户名和密码都是以明文形式传送的,也没有采取任何措施防止对报文的篡改.安全使用基本认证的唯一方式就是将其与SSL配合使用 摘要认证与基本认证兼容,但 ...

  3. [杂谈]冲NOIP一等奖。。

    唉不想多说了. 真是一段“传奇”的经历啊. 还是那句话..“是的我上次什么都没说就走了...”这次也一样. 我还是太单纯的以为我们是肯定能够参加北大的夏令营的..然而结果真是意料之外啊. 本来我以为我 ...

  4. git提交时支持文件名大小写的修改

    在windows环境下,git提交文件时,默认对文件名大小写不敏感,若修改了文件名字的大小写,可能会导致提交时没有记录,文件名修改不成功.网上搜集了几种解决方法,现总结下: 1. 修改git conf ...

  5. 【asp.net】Linux 部署 asp.net core 项目

    Net sdk官网LINUX配置地址:https://www.microsoft.com/net/core#windows 参考:http://www.07net01.com/2016/08/1638 ...

  6. WinForm开发之取送货管理2

    写的有点慢,但都是一步步操作的,希望这些能成为以后宝贵的财富,话不多说,续上次取送货基本信息管理之产品分类管理,下面进行增删改的编写. 增加产品分类管理信息记录,双击[新增]按钮(其新增可让用户在Te ...

  7. Snort - manual 笔记(一)

    Chapter 1 Snort Overview This manual is based on Writing Snort Rules by Martin Roesch and further wo ...

  8. NHibernate实战详解(一)领域模型设计

    关于NHibernate的资料本身就不多,中文的就更少了,好在有一些翻译文章含金量很高,另外NHibernate与Hibernate的使用方式可谓神似,所以也有不少经验可以去参考Hibernate. ...

  9. 【转】敏捷开发 Scrum 总结

    转:http://www.open-open.com/lib/view/open1330413325514.html 最近把之前学习 Scrum 的资料整理为一篇文档,在接下来的团队和项目开发中,根据 ...

随机推荐

  1. append与after

    apend与apendTo就如同after与insertAfter,表达意思相同,表达不同.A.after(B)=B.insertAfter(A).apend在元素里面添加,after在元素外面添加. ...

  2. 随心所欲~我也做个集合遍历器吧(自己的foreach,委托的威力)

    感觉微软在面向对象三大原则中,封装性运用的最为突出,它会将一些复杂的算法,结构,功能代码进行封装,让程序员在使用时十分得心应手,如关键字里的foreach和labmda表达式里的Foreach等等,今 ...

  3. Matrix(多线程dp)

    Matrix Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Sub ...

  4. I Hate It(线段树)

    I Hate It Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  5. Dynamics CRM 2013 初体验(1):系统的安装

    最近收到Microsoft的Dynamics CRM 2013 beta测试邀请,终于让我掀开了它神秘的面纱.自从去年的Dynamics CRM 2012 December补丁包发布后,系统就添加了很 ...

  6. QML Performance

    1) Limit JavaScript a) inline JavaScript:  内联的JavaScript方法;  1. 将js方法放置在Element内部; 2. 尝试将语句写在一行内; e. ...

  7. SGU 506.Subsequences Of Substrings

    求一个串S有多少子串subS满足s是subS的子序列.len(S)<=100000, len(s)<=100 直接扫一遍... ------------------------------ ...

  8. 利用 onload 事件监控跨站资源

    用过 CSP 的都很郁闷,上报的只有违规的站点名,却没有具体路径.这是缺陷,还是特意的设计? 显然,CSP 是为安全定制的,里面的规范自然要严格制定,否则就会带来新的安全问题.如果支持详细路径的上报, ...

  9. poj 1966 Cable TV Network 顶点连通度

    题目链接 给一个图, n个点m条边, 求至少去掉多少个点可以使得图不再联通.随便指定一个点为源点, 枚举其他点为汇点的情况, 跑网络流, 求其中最小的情况. 如果最后ans为inf, 说明是一个完全图 ...

  10. SQL Server 数据库所有者

    1. 数据库所有者应当永远是 sa 用户 2. 改变数据库的所有者 alter authorization on database :: databaseName to sa; -- 这一句话把数据库 ...