JQuery Mobile iscroll插件使用教程及注意事项

中文文档: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控件

转载于:https://www.cnblogs.com/forever-cjs/p/5133190.html

JQuery Mobile iscroll插件使用教程及注意事项相关推荐

java ajax jquery分页插件_分享精心挑选的12款优秀jQuery Ajax分页插件和教程
摘要:这篇jQuery栏目下的"分享精心挑选的12款优秀jQuery Ajax分页插件和教程",介绍的技术点是"jquery_ajax分页插件.jquery_ajax.a ...
18 个 jQuery Mobile 开发贴士和教程
jQuery Mobile 是 jQuery 在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架.支持 ...
45个jQuery的导航插件和教程
正如我们所知道的,一个新用户访问一个网站时,决定他们去留的关键是最初的15-20秒种.这是至关重要的,你必须遵循统一的风格来设计您的网站,特别是导航的风格,可能性规则,让用户可以轻松地找到他们想要的内 ...
精心挑选的15款优秀 jQuery 文本特效插件和教程
今天这篇文章向大家分享15款精心挑选的优秀 jQuery 文本特效插件,都带有详细的使用教程.jQuery 是最流行和使用最广泛的 JavaScript 框架,它简化了 HTML 文档遍历,事件处理, ...
精心挑选12款优秀 jQuery 手风琴效果插件和教程
当你想在有限的页面空间内展示多个内容片段的时候,手风琴(Accordion)效果就显得非常有用,它可以帮助你以对用户非常友好的方式实现多个内容片段之间的切换.借助流行的 jQuery 框架,只需很少的 ...
12款优秀jQuery Ajax分页插件和教程
在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 ...
推荐40个简单的 jQuery 导航插件和教程【下篇】
在这篇文章中,我为大家收集了40款非常棒的 jQuery 导航插件和教程.导航作为网站重要的组成部分,能够帮助用户找到他们想要的内容,因此导航设计的好坏决定了用户能够在你的网站停留更长的时间,浏览更多 ...
一些必看的jQuery导航插件和教程
2019独角兽企业重金招聘Python工程师标准>>> 导航是一个网站最重要的元素之一,您必须遵循统一的风格来设计您的网站,特别是导航的风格,让用户可以轻松地找到他们想要的内容.这里 ...
jquery mobile mobiscroll 日期插件使用mobiscroll
jquery mobile mobiscroll 日期插件使用mobiscroll 官网网站: http://www.mobiscroll.com/ http://code.google.com/p ...

JQuery Mobile iscroll插件使用教程及注意事项

JQuery Mobile iscroll插件使用教程及注意事项相关推荐

最新文章

热门文章