iscroll修改
近期项目中使用iScroll遇到一个问题,在设定wrapper为横向滚动时,如果你手指放在该区域,将无法拉动页面,也就是说该区域取消了默认事件。这个体验是实在是无法接受,特别是页面中有多个横向滚动区域时,很容易触碰到这种区域,这时用户将觉得页面很卡。
Google搜了一下,看来很多人都为这个问题而烦恼。有高人给出了解决方案,在这里可以找到。
代码如下:
myScroll = new iScroll('scrollpanel', {
// other options go here...
vScroll: false,
onBeforeScrollStart: function ( e ) {
if ( this.absDistX > (this.absDistY + 5 ) ) {
// user is scrolling the x axis, so prevent the browsers' native scrolling
e.preventDefault();
}
}
});
重写onBeforeScrollStart事件,判断touch的滑动距离,只在横向滑动距离大于竖向滑动距离时(也就是左右滑动时)才取消默认事件,这样就不影响页面滚动了。看iScroll源码,onBeforeScrollStart: function (e) { e.preventDefault(); }, 它默认是直接取消默认事件。
到这里的时候感觉就不错了。但是不要高兴的太早。
上下滑动横向滚动区域,页面确实可以滚动了,但在多体验了几次页面之后,又出现了一个问题。
先左右滑动该区域,滚动停止后再按住该区域想滚动页面,你会发现它还是不能滚动页面,这时你再点击一次该区域,这时可以了。这相对于你需要触摸2次才能滚动页面, 这样的行为还是让人无法接受。
经过多翻测试,我把问题锁定到absDistX/Y上。最后发现,在左右滑动之后absDistX/Y的值不会重置,第二次滑动该区域时执行onBeforeScrollStart事件,里面absDistX/Y值是上一次的值,所以程序还是阻止了页面滚动。
解决方法如下:
myScroll = new iScroll('scrollpanel', {
// other options go here...
hScroll: true,
onBeforeScrollStart: function ( e ) {
if ( this.absDistX > (this.absDistY + 5 ) ) {
// user is scrolling the x axis, so prevent the browsers' native scrolling
e.preventDefault();
}
},
//解决第一次无法滑动的问题
onTouchEnd: function () {
var self = this;
if (self.touchEndTimeId) {
clearTimeout(self.touchEndTimeId);
} self.touchEndTimeId = setTimeout(function () {
self.absDistX = 0;
self.absDistY = 0;
}, 600);
}
});
在onTouchEnd里面做处理,每次滑动之后都重置absDistX/Y的值。为什么要使用setTimeout?其实是为了防止误判断,太敏感也不好,有时候你只是想左右滑动虽然滑动的角度有点朝上或朝下。
iscroll修改的更多相关文章
- iScroll框架的使用和修改
iScroll 的诞生是因为手机 Webkit 浏览器(iPhone.iPod.Android 和 Pre)本身没有为固定宽度和高度的元素提供滚动内容的方法.这导致了很多网页使用 position:a ...
- 使用 iscroll 实现焦点图无限循环
现在大家应该都看到过焦点图轮播的效果,这个效果是什么样我就不截图了.昨天做练习,练习要求是使用iscroll实现焦点图的无限循环滚动,并且当手指触摸焦点图后,停止焦点图的循环滚动.第一次接触iscro ...
- iscroll
在原生APP的开发中,有一个常见的功能,就是下拉刷新的功能,这个想必大家都是知道的,但是原生APP的开发,有一个很大的问题就是,你每次更新一些功能,就要用户重新下载一次版本,尤其是在iOS系统中,新版 ...
- 滚动条美化实践(原生js,iscroll,nicescroll)
近期需要改造项目中的滚动条,使原滚动条在三大浏览器下表现相同,分享一下自己的改造经历: 项目中的滚动条分布在网页的各个小窗口中,使用的是-webkit-scrollbar制作,在-webkit内核的浏 ...
- jquery——移动端滚动条插件iScroll.js
官网:http://cubiq.org/iscroll-5 demo: 滚动刷新:http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/ ...
- 【iScroll源码学习00】模拟iScroll
前言 相信对移动端有了解的朋友对iScroll这个库非常熟悉吧,今天我们就来说下我们移动页面的iScroll化 iScroll是我们必学框架之一,我们这次先根据iScroll功能自己实现其功能,然后再 ...
- 使用iScroll时,input等不能输入内容的解决方法
做移动平台的应用,使用iscroll使屏幕上下滑动.发现当使用iscroll后,input等不能输入内容了.只要在iscroll.js文件中加入如下代码就ok了. function allowForm ...
- 使用iScroll时,input等不能输入内容的解决方法(share)
最近做移动平台的应用,使用iscroll使屏幕上下滑动.发现当使用iscroll后,input等不能输入内容了.只要在iscroll.js文件中加入如下代码就ok了. function allowFo ...
- iScroll滚动区域中select、input、textarea元素无法点击的Bug修复
最近在一个项目中使用了iScroll4模拟滚动效果,调试过程中发现一个表单页中的所有表单项都无法点击聚焦, 如<select>.<input>.<textarea> ...
随机推荐
- 用到的一些python包,记录下
Requests beautifulsoup lxml logging gevent django Bottle numpy pandas sklearn pyopencv opencv_python ...
- NodeJS中的异步I/O、事件驱动
nodejs的主要特点是单线程.异步I/O.事件驱动.让我们先大概了解一下这些名词的意思. 单线程 单线程是任务按照顺序执行的,并且每次只执行一个任务,只有前面的任务执行完成以后,后面的任务才执行.在 ...
- nginx 域名绑定端
server { listen 80; server_name taqing.me www.taqing.me; ##,绑定域名 location / { proxy_pass http://127. ...
- 在object,embed上添加跳转链接(视频上添加跳转)
今天遇到个问题,就是在视频上添加跳转链接时,谷歌浏览器能正常跳转,但是ie下,却无效,视频使用object引入,<a>标签跟随其后采用绝对定位,和平时的图片加跳转操作一样.原来是需要加上& ...
- 判断 iframe 是否加载完成的完美方法
一般来说,我们判断 iframe 是否加载完成其实与 判断 JavaScript 文件是否加载完成 采用的方法很类似:var iframe = document.createElement(" ...
- iframe自动高度
<script> //设置iframe自动高度 function setIframe(id){ var fn = function(){ try{ var iframe = typeof ...
- occ添加新的捕捉模式
Load (theSelection, theShape, theType, theDeflection, theDeviationAngle, isAutoTriangulation, thePri ...
- WinForm 窗体基本属性、公共控件
一.WinForm:客户端程序制作 - C/S (B/S:服务器端) 它是基于.NET Framework框架上运行,不是必须在windows系统上才能运行---------------------- ...
- ios基础篇(二十四)—— 文字、图片的绘制及其自定义Button
这篇文章我们主要来拿官方的控件来研究一下,我们来仿照官方的控件,自己来实现它提供的控件: 首先来看看基本的图片与文字的绘制,很简单. 一.imageView 所有的视图都是继承自UIView,所以我们 ...
- BZOJ AC800纪念
貌似没什么好纪念的...QAQQQ 好不容易水到了800还是记录一下好了....不过感觉水这么多题没有意义啊[思考熊] 然后就没有然后了恩 不过我到底是为什么才努力的呢...前途一阵迷茫,根本没有什么 ...