iScroll滚动区域中select、input、textarea元素无法点击的Bug修复

最近在一个项目中使用了iScroll4模拟滚动效果，调试过程中发现一个表单页中的所有表单项都无法点击聚焦，如<select>、<input>、<textarea>。这是因为iScroll要监听整个页面事件，为了达到最优效果，它默认禁用了所有元素的默认事件（但也有例外，如<a>默认事件不受影响），所以才造成这些表单元素点击没有反应，无法正常聚焦。

 

我们打开 iscroll.js ，找到这一行：

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

 

这样，input及textarea可以正常聚焦了，但是发现select点击还是没有弹出下拉列表框。

 

这是因为 iscroll 默认使用的是css的transform变形中的translate3d实现区域滚动，每次滚动实际是改变translate3d中的y轴值，实际的dom位置并没有发生变化。translate3d会导致页面的焦点错误，系统级下拉菜单的显示则会导致其出现显示偏离。

 

控制滚动模式的代码默认是：useTransform: true。好在iscroll提供了另一种滚动方式，基于绝对定位位置变化的滚动。修改为useTransform: false之后，iscroll就会使用对定位位方式来实现滚动，该方式是我们在web开发中模拟动画的最常用方式，滚动之后dom的实际位置也同步发生了变化，不会出现错位偏离现象。

 

以上修改后，所有的表单元素都能正常使用了，不过需要注意，使用对position决定定位后，滚动区的宽度默认会自适应内容宽度，而不是父元素的100%，所以最好将滚动区域宽度设为100%。如果还有任何疑问，欢迎QQ天南：46926125