中文文档:http://www.360doc.com/content/14/0724/11/16276861_396699901.shtml
问题:使用了iscroll之后,你会发现点击输入框时不灵敏,经常无法聚焦;页面文字也无法选择和复制。这是由于iscroll要监听鼠标事件和触摸事件来进行滚动,所以禁止了浏览器的默认行为 ,包含在wrapper中的input、Seclect控件无法选择或点击
解决办法:
在创建Scorll时,定义以下方法
onBeforeScrollStart: function (e) { var target = e.target; while (target.nodeType != 1) target = target.parentNode; if (target.tagName != ‘SELECT’ && target.tagName != ‘INPUT’ && target.tagName != ‘TEXTAREA’) e.preventDefault(); },
完整代码:
/** * 初始化iScroll控件 */ function loaded() { pullUpEl = document.getElementById(‘pullUp‘); pullUpOffset = pullUpEl.offsetHeight; myScroll = new iScroll(‘wrapper‘, { useTransition: false, /* 防止更新时闪动 */ topOffset: pullDownOffset, onRefresh: function () { if (pullUpEl.className.match(‘loading‘)) { pullUpEl.className = ‘tips‘; pullUpEl.querySelector(‘.pullUpLabel‘).innerHTML = ‘上拉加载更多...‘; } }, onScrollMove: function () { if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match(‘flip‘)) { pullUpEl.className = ‘flip tips‘; pullUpEl.querySelector(‘.pullUpLabel‘).innerHTML = ‘松手开始更新...‘; this.maxScrollY = this.maxScrollY; } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match(‘flip‘)) { pullUpEl.className = ‘tips‘; pullUpEl.querySelector(‘.pullUpLabel‘).innerHTML = ‘上拉加载更多...‘; this.maxScrollY = pullUpOffset; } }, onScrollEnd: function () { if (pullUpEl.className.match(‘flip‘)) { pullUpEl.className = ‘loading tips‘; pullUpEl.querySelector(‘.pullUpLabel‘).innerHTML = ‘加载中...‘; pullUpAction(); // Execute custom function (ajax call?) } }, onBeforeScrollStart: function (e) { var target = e.target; while (target.nodeType != 1) target = target.parentNode; if (target.tagName != ‘SELECT‘ && target.tagName != ‘INPUT‘ && target.tagName != ‘TEXTAREA‘) e.preventDefault(); } }); setTimeout(function () { document.getElementById(‘wrapper‘).style.left = ‘0‘; }, 500); } document.addEventListener(‘touchmove‘, function (e) { e.preventDefault(); }, false); document.addEventListener(‘DOMContentLoaded‘, loaded, false); //初始化绑定iScroll控件
时间: 2024-10-28 20:55:25