http://oklai.name/ 无法横向拉动 iscroll
2013-11-20 17:50
162 查看
解决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?其实是为了防止误判断,太敏感也不好,有时候你只是想左右滑动虽然滑动的角度有点朝上或朝下。
Ok,现在终于爽了,想怎么滑都行。体验一下!
转载 http://oklai.name/ 无法横向拉动 iscroll
相关文章推荐
- 解决iScroll横向滚动区域无法拉动页面的问题
- iscroll初始化无法生成滚动条的问题解决
- 使用HorizontalListView完成一个可拉动刷新的横向listview并且初始可以定位的
- iscroll.js的上拉下拉刷新时无法回弹的解决方法
- iScroll-5拉动刷新功能实现与iScroll-4上拉刷新的一点改进
- 手机网站使用iscroll插件链接无法点击解决方案
- iScroll4.2.5中的无法滑动或点击的解决方案(转)
- [one day one question] Iscroll 5.0 在chrome上无法滑动
- 解决iscroll.js上拉下拉刷新手指划出屏幕页面无法回弹问题
- IScroll 无法上下滚动问题
- WPF:解决DataGrid横向滚动条无法显示的问题
- iscroll初始化以及横向滚动需要注意的一些坑
- vs2005 ASP.Net 解决水晶报表无法横向打印
- 解决iscroll和bettre-scroll初始化无法滚动
- iScroll4.2.5中的无法滑动或点击的解决方案
- 关于iscroll滚动插件,在iOS下面,上拉之后无法回弹的问题
- 解决iscroll.js上拉下拉刷新手指划出屏幕页面无法回弹问题
- WPF:解决DataGrid横向滚动条无法显示的问题
- 【技术贴】笔记本鼠标无法拉动文件无法移动文件夹无法拖放,鼠标不能选定,不能选定文字解决办法。
- Android 自定义 Dialog 无法横向铺满屏幕