在移动端页面上,如果要实现【顶部轮播,手指触摸左右滑动】
我的方案是,通过监听滑动,阻止默认事件来完成

div.addEventListener('touchmove',function(event){
event.preventDefault();//阻止浏览器的默认事件
})

  

这样,左右滑动可以完成了,但是触摸这个div的时候,页面不能上下滑动了,怎么办?

当touchmove的时候,实时改变window的scrolltop值?

这样会有原生的滑动效果吗?

大家有什么解决方案

问题已经解决了,思路是

var xx,yy,XX,YY,swipeX,swipeY ;
div.addEventListener('touchstart',function(event){
xx = event.targetTouches[0].screenX ;
yy = event.targetTouches[0].screenY ;
swipeX = true;
swipeY = true ;
})
div.addEventListener('touchmove',function(event){
XX = event.targetTouches[0].screenX ;
YY = event.targetTouches[0].screenY ;
if(swipeX && Math.abs(XX-xx)-Math.abs(YY-yy)>0) //左右滑动
{
event.stopPropagation();//组织冒泡
event.preventDefault();//阻止浏览器默认事件
swipeY = false ;
//左右滑动
}
else if(swipeY && Math.abs(XX-xx)-Math.abs(YY-yy)<0){ //上下滑动
swipeX = false ;
//上下滑动,使用浏览器默认的上下滑动
}
})

  

可以判断下move大概方向,然后水平的时候阻止默认行为,其他时候不阻止就OK了

 

其实 单纯判断move是水平也是不行的,如果用户是斜上地滑怎么判断?

我的想法是,在这个轮播上实现这样的一个覆盖层

当用户从A触发了touchstart 结束或者move到b,或者b start,在c上结束,判定为右滑。左滑则相反。

HTML5 移动端的上下左右滑动问题的更多相关文章

  1. HTML5移动端图片左右切换动画

    插件描述:HTML5移动端图片左右切换动画 小海今天要给大家分享一款很不错的图片左右切换焦点图动画,并且支持移动端触摸滑动.功能上,这款HTML5图片播放器支持鼠标滑动.手机端触摸滑动以及自动播放.外 ...

  2. javascript移动端禁止页面滑动的解决方案

    1 前言 移动端网页,发现ios平台的iphone或者ipad,网页可以上下左右移动,而Android版则不会.仅作为记录使用. 2 代码 var mo=function(e){e.preventDe ...

  3. 解决移动端H5海报滑动插件适应大部分手机问题 手机端高度自适应

    Html5微信端滑屏海报在各种尺寸的手机上总会有这样那样的问题,经过多次制作总结出来一些小心得,分享下. 我使用的是jquery插件swiper.min.js,动画可以利用animate.css,如果 ...

  4. HTML5 移动端web

    概述 HTML5 提供了很多新的功能,主要有: 新的 HTML 元素,例如 section, nav, header, footer, article 等 用于绘画的 Canvas 元素 用于多媒体播 ...

  5. JavaScript之屏幕上下左右滑动监听

    前言 存在这么一个需求,根据用户在屏幕不同的滑动方向(上.下.左.右),使用js脚本判断出不同的滑动行为,更新网页为不同的界面. 源码 参考了博文[1]的源码,但由于存在一些漏洞,比如:上下滑动事件监 ...

  6. 移动端全屏滑动的小插件,简单,轻便,好用,只有3k swiper,myswiper,page,stage

    https://github.com/donglegend/mySwiper mySwiper 移动端全屏滑动的小插件,简单,轻便,好用,只有3k 下载 直接下载 bower install mySw ...

  7. JS案例之5——移动端触屏滑动

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

  8. html5 移动端单页面布局

    序     移动端的web网页使用的是响应式设计,但一般我们看到的网站页面都是跳转刷新得到的,比如通过点击一个menu后进入到另一个页面 今天来说下是移动端的单页面的布局.单页面就是一切操作和布局都是 ...

  9. 23web app实现上下左右滑动

    转载请说明出处:http://blog.csdn.net/wowkk/article/category/1619287 (创意系列) /*最近项目须要苹果电脑,假设您支持学生创业并愿意赞助我们一台,请 ...

随机推荐

  1. JAVA自学笔记06

    JAVA自学笔记06 1.二维数组 1)格式: ①数据类型[][]数组名 = new 数据类型[m][n]; 或 数据类型[]数组名[]=new 数据类型[m][n]; m表示这个二维数组有多少个一维 ...

  2. git操作中出现Unlink of file '......' failed. Should I try again?

    在操作git中有时候会提示 Unlink of file '......' failed. Should I try again? 原因是你工作目录有某些文件正在被程序使用,这个程序多半是Idea,V ...

  3. ABAP语言实现 左移 <<、无符号右移 >>> 位移操作

    这几天要在ABAP中实现 3DES 标准对称加密算法,与其他外部系统进行加密/解密操作.由于ABAP语言中没有 左移 <<.无符号右移 >>>  操作,只能自己实现 思路 ...

  4. ajax跨域请求调用webservice接口

    1.WebService 接口编写 步骤:新建web项目=>添加web service=>编写方法接口=>然后发布(本地测试可以直接把这个web service运行起来). 关键如何 ...

  5. 系统架构-设计模式(适配器、观察者、代理、抽象工厂等)及架构模式(C/S、B/S、分布式、SOA、SaaS)(干货)

    博客园首页是需要分享干货的地方,今天早上写的<HRMS(人力资源管理系统)-从单机应用到SaaS应用-系统介绍>内容下架了,所以我就按照相关规定,只分享干货,我把之前写完的内容整理发布上来 ...

  6. spring mvc \ spring boot 允许跨域请求 配置类

    用@Component 注释下,随便放个地方就可以了 package com.chinaws.wsarchivesserver.core.config; import org.springframew ...

  7. 基本够用的php.ini配置文件(CentOS7)

    [PHP] engine = On short_open_tag = Off asp_tags = Off precision = output_buffering = zlib.output_com ...

  8. [转]awsome-python

    原文链接 Python 资源大全中文版 我想很多程序员应该记得 GitHub 上有一个 Awesome - XXX 系列的资源整理.awesome-python 是 vinta 发起维护的 Pytho ...

  9. 关于dede后台登陆后一片空白以及去除版权

    今天家里的电脑上新装DEDE5.7后台登陆后竟然一片空白,装PHPCMS却没有问题.百度了好久,也没找到一个像样的答案,晕死! 看了源码后发现在源码里的类库中很多都是PHP4的语法,var这个函数在P ...

  10. AYUI7 WPF MVC插件欣赏

    AYUI7  MVC 提前预览 一个插件安装,享受所有快捷操作 静态图: 支持xaml中aymvc快速绑定多个操作 支持controller中  ayaction快速创建action代码块, 在AYU ...