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> ...
随机推荐
- 搭建nginx+tomcat+Java的负载均衡环境
转载 未测 供参考 另外这篇文章也不错.http://blog.csdn.net/wang379275614/article/details/47778201 一.简介: Tomcat在高并发环境下 ...
- IE10、IE11和Microsoft Edge的Hack
IE10.IE11和Microsoft Edge的Hack 随着Win10的推广,Microsoft Edge浏览器已经越来越普遍,但是IE11也是伴随其中,尾大不掉. 首先,了解一下概念,如下图:微 ...
- 关于中文字体的设置说明(font:12px/1.5 tahoma,arial,\5b8b\4f53)
定义全局字体是这样的font:12px/1.5 tahoma,arial,\5b8b\4f53 前面的12px字体,1.5表示行高,18px 后面的\5b8b\4f53为什么写成这样的呢? 请教百度谷 ...
- JSP自定义标签/自定义标签打包
有这样一个业务需求: 当我们在编辑某个用户时,需要设置该用户的角色,在转到编辑页面时,就需要自动勾选上该用户已经选择的角色,如下图: 当我们点击编辑时,会查询用户详细信息,以及角色集合传到编辑页面. ...
- ElasticSearch部署安装
测试版本:elasticsearch-5.1.1 1.Windows环境下安装(win10系统) 1)解压elasticsearch-5.1.1.zip. 2)执行elasticsearch.bat启 ...
- 2013年度最强AngularJS资源合集
原文在这里 2013年度最强AngularJS资源合集 来看我的视频教程,国内第一款完整的AngularJS视频教程http://www.imooc.com/learn/156 司徒正美 写道 htt ...
- NetworkComms V3 使用Json序列化器进行网络通信
刚才在网上闲逛,偶然看到一篇文章 C#(服务器)与Java(客户端)通过Socket传递对象 网址是:http://www.cnblogs.com/iyangyuan/archive/2012/12/ ...
- Java线程(七):Callable和Future
转自:http://blog.csdn.net/ghsau/article/details/7451464 本篇说明的是Callable和Future,它俩很有意思的,一个产生结果,一个拿到结果. C ...
- [并查集] POJ 1182 食物链
食物链 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 66294 Accepted: 19539 Description ...
- Redis设计与实现(一~五整合版)【搬运】
Redis设计与实现(一~五整合版) by @飘过的小牛 一 前言 项目中用到了redis,但用到的都是最最基本的功能,比如简单的slave机制,数据结构只使用了字符串.但是一直听说redis是一个很 ...