iScroll 4，把禁掉的:active样式还给我~

iScroll这个移动端的滚动神器大家都非常熟悉了，直到现在仍是实现移动端Web滚动的首选方案之一。。。

当我接触移动端Web时iScroll已经有两个版本了，iScroll 4和iScroll 5，当时看到很多文章都是关于iScroll 4的，看来这个版本已经得到的非常广泛的应用，而iScroll 5的文章相对非常之少，好吧，项目进度耽误不起，我们就选当前最流行的这个版本吧（iScroll 4.2.5），想必也是最成熟稳定的。。。

 

iScroll 4的官网地址：

http://cubiq.org/iscroll-4

 

这个插件的功能全面，使用也简单，应对表面统一的移动浏览器平台（我们只关注webkit核心~~ ^_^）感觉游刃有余，对于性能问题，使用初期也察觉到有什么异样（看来常年停留在安卓2.3系统的我根本不知道顺滑与卡顿的区别~~），心里还在莫莫崇拜国外牛人多啊~~ 

 

直到项目进入后期完善阶段了，就会到处点一点，按一按，检查下前端工作是否有重大Bug，突然间意识到有些页面表现怪怪的，一些Button点击时少了一点什么效果，原来是在点击按钮时没有表现出交互效果！

 

查看下CSS代码，明明我在.btn类上加了:active效果了的，而且在应用iScroll滚动的区域外的button是有效果的（我是用桌面Chrome模拟器的），那问题一定是出在iScroll身上了。。。其实这个问题也可以理解，在很多类似的模拟插件中如果不禁用掉系统默认事件或者效果的话，达不到完美的用户体验效果，印象中桌面端的那个mousewheel插件就是如此。。。

 

那我就看API，找度娘~~原来很早有很多人已经遇到这样的问题了，比如园里的Tony同学（http://www.cnblogs.com/lostyu/p/3907256.html）哈哈，有人进过坑，就意识着有人成功跳出过坑~~直接把解决方法拿来用是我们前端城狮的必要技术之一，于是我也复制之~~ ^o^  

 

iScroll作者当时一刀砍啊，所有默认行为全部干掉了：

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(); }

这个方法很直接，很有效，将最为常用的系统组件select、option、input、textarea等等在iScroll中点击无效的问题解决了；

但是如果我们想让Button也能点击且有点击效果的话，就要手动再加  && nodeType != 'button'  到代码里去，也行吧~~~

 

但是如果我们想让<a class="btn">也有点击效果~~~，就要进一步改造啦。

对了，不是有iScroll 5了吗，它会不会有这个问题呢？看一下API， 新版本已经有相关的控制参数了： options.preventDefaultException

 

iScroll 5官网API： 

http://iscrolljs.com/#advanced-options

 

要不直接换iScroll 5? 了解过iScroll 5的同学要先呵呵一下，因为iScroll 5已经不是4+1=5那么简单了。

iScroll 5已经完全重写了，不少接口都做了改变，就连实例化的方式都不同了，这么说吧，iScroll 4与5完全是两个东西，你甚至可以在同一个页面中同时使用它们俩：

 

iScroll 4使用：

new iScroll('scroll-wrapper-1');

 

iScroll 5使用：

new IScroll('#scroll-wrapper-2');

 

iScroll 5提供的那个配置接口参数可以解决我们之前遇到的问题：

new IScroll('#pro-detail',{ preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/, className: /(^|\s)btn(\s|$)/ } });

看到  className: /(^|\s)btn(\s|$)/  了吗？ 这样就可以使.btn的元素不被preventDefault()方法干扰。

 

由于换用iScroll5的劳动成本略大于对iScroll4的改进（其实是不改心里有点难受，我不是处女座），我们开始改动工~

 

我们学习iScroll 5的样子，为iScroll 4也添加配置参数（大概在107行）：

 // Default options

        that.options = { hScroll: true, vScroll: true, x: 0, y: 0, bounce: true, bounceLock: false, momentum: true, lockDirection: true, useTransform: true, useTransition: false, topOffset: 0, checkDOMChanges: false,     // Experimental

            handleClick: true,  preventDefaultException: "", // ex: "A|BUTTON|.btn-class|#btn-id"

 。。。

 

然后将那个onBeforeScrollStart方法在同学们改造过的基础之上变得更丰满，如下：

onBeforeScrollStart: function (e) { var nodeType = e.explicitOriginalTarget ? e.explicitOriginalTarget.nodeName.toLowerCase() : (e.target ? e.target.nodeName.toLowerCase() : ''); var excpt = that.options.preventDefaultException.replace(/\s/g, ""), excptArr = null, targetNode = null; if (nodeType != 'select' && nodeType != 'option' && nodeType != 'input' && nodeType != 'textarea' && !isExcptNode(e.target, excpt)) { e.preventDefault(); } function isExcptNode(_node, _excptStr) { var result = false; if (_excptStr) { targetNode = _node; excpt += _excptStr.match("|") ? "" : "|"; excptArr = excpt.split("|"); for (i in excptArr) { if (targetNode.nodeName.toString().toLowerCase() == excptArr[i].toLowerCase()) { result = true; break; } else if (excptArr[i].match("#")) { if (targetNode.id.match(excptArr[i].replace("#", ""))) { result = true; break; } } else if (excptArr[i].match(".")) { if (targetNode.className.match(excptArr[i].replace(".", ""))) { result = true; break; } } } } return result; } }

 

于是，我们也可以在使用iScroll4时这样啦：

new iScroll('wrapper', { useTransition: false, vScrollbar: false, preventDefaultException:".btn|.btn-b|#btn-submit" });