HTML5 移动端的上下左右滑动问题
在移动端页面上,如果要实现【顶部轮播,手指触摸左右滑动】
我的方案是,通过监听滑动,阻止默认事件来完成
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 移动端的上下左右滑动问题的更多相关文章
- HTML5移动端图片左右切换动画
插件描述:HTML5移动端图片左右切换动画 小海今天要给大家分享一款很不错的图片左右切换焦点图动画,并且支持移动端触摸滑动.功能上,这款HTML5图片播放器支持鼠标滑动.手机端触摸滑动以及自动播放.外 ...
- javascript移动端禁止页面滑动的解决方案
1 前言 移动端网页,发现ios平台的iphone或者ipad,网页可以上下左右移动,而Android版则不会.仅作为记录使用. 2 代码 var mo=function(e){e.preventDe ...
- 解决移动端H5海报滑动插件适应大部分手机问题 手机端高度自适应
Html5微信端滑屏海报在各种尺寸的手机上总会有这样那样的问题,经过多次制作总结出来一些小心得,分享下. 我使用的是jquery插件swiper.min.js,动画可以利用animate.css,如果 ...
- HTML5 移动端web
概述 HTML5 提供了很多新的功能,主要有: 新的 HTML 元素,例如 section, nav, header, footer, article 等 用于绘画的 Canvas 元素 用于多媒体播 ...
- JavaScript之屏幕上下左右滑动监听
前言 存在这么一个需求,根据用户在屏幕不同的滑动方向(上.下.左.右),使用js脚本判断出不同的滑动行为,更新网页为不同的界面. 源码 参考了博文[1]的源码,但由于存在一些漏洞,比如:上下滑动事件监 ...
- 移动端全屏滑动的小插件,简单,轻便,好用,只有3k swiper,myswiper,page,stage
https://github.com/donglegend/mySwiper mySwiper 移动端全屏滑动的小插件,简单,轻便,好用,只有3k 下载 直接下载 bower install mySw ...
- JS案例之5——移动端触屏滑动
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...
- html5 移动端单页面布局
序 移动端的web网页使用的是响应式设计,但一般我们看到的网站页面都是跳转刷新得到的,比如通过点击一个menu后进入到另一个页面 今天来说下是移动端的单页面的布局.单页面就是一切操作和布局都是 ...
- 23web app实现上下左右滑动
转载请说明出处:http://blog.csdn.net/wowkk/article/category/1619287 (创意系列) /*最近项目须要苹果电脑,假设您支持学生创业并愿意赞助我们一台,请 ...
随机推荐
- fzu1062 洗牌问题(思路模拟)
http://acm.fzu.edu.cn/problem.php?pid=1062 一开始想暴力找规律,没看出来..然后开始推,推测根据1再次返回第一个的时候顺序也复原,然后想以此推导出一个规律公式 ...
- mac 下apache服务的根目录
根据文章的介绍 http://jingyan.baidu.com/article/67508eb434539f9cca1ce4da.html apache服务的根目录是在 /Library/WebSe ...
- 一步步教你轻松学支持向量机SVM算法之案例篇2
一步步教你轻松学支持向量机SVM算法之案例篇2 (白宁超 2018年10月22日10:09:07) 摘要:支持向量机即SVM(Support Vector Machine) ,是一种监督学习算法,属于 ...
- error running git
I ran xcode-select --install and everything worked for me.
- 【PMP】关键路径法与关键链法
通俗理解 关键路径法:把项目上的资源都事先全部分到每个活动上. 关键链法:每个活动不打富余,项目经理自己掌握资源,哪个成员执行过程中遇到困难,再给他单独分配资源. PMBOK定义 关键路径法:关键路径 ...
- Windows下python3生成UTF8的CSV文件和sha256sum踩坑记录
CSV的坑 在Ubuntu下是简单的写入完事 import csv ... with open(filename, 'w') as output: f = csv.writer(output) f.w ...
- Docker+Nginx+Keepalived实现架构高可用
一.背景 通过keepalived实现nginx高可用,由于在家不想弄多台主机来搞,所以将运行环境用docker封装来模拟跨主机 docker基础镜像:centos 说之前,简单介绍一下: Keepa ...
- JAVA8 之 Stream sorted() 示例
下面代码以自然序排序一个listlist.stream().sorted() 自然序逆序元素,使用Comparator 提供的reverseOrder() 方法list.stream().sorted ...
- shell 实例
转载自:https://github.com/liquanzhou/ops_doc 这里只作为笔记使用,不做他用 shell实例手册 0 说明{ 手册制作: 雪松 更新日期: 2018-09-1 ...
- AI习惯的数学书籍、计算机经典书籍
http://download.csdn.net/download/wz619899442/8405297 https://www.amazon.com/Introduction-Automata-T ...