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 (创意系列) /*最近项目须要苹果电脑,假设您支持学生创业并愿意赞助我们一台,请 ...
随机推荐
- SpringMVC(2)—SpringMVC整合Spring的HelloWorld
一.这是一个SpringMVC框架的案例HelloWorld 功能:HelloWorld 二.SpringMVC运行流程 1.流程 请求-->springDispatcherServlet的ur ...
- 【linux】linux下准确查询正在tomcat下运行的java进程。准确获取正在运行的java进程的PID
准确获取定位到tomcat下正在运行的java进程的PID命令: ps -ef|grep java | grep catalina | awk '{print $2}' 准确定位到tomcat下正在运 ...
- js统计文本框剩余可输入字数
js统计文本框剩余可输入字数 <html><head runat="server"> <title></title> <scr ...
- 浅谈MFC类CrackMe中消息处理函数查找方法
最近一个学姐发给我了一份CrackMe希望我解一下,其中涉及到了MFC的消息函数查找的问题,就顺便以此为例谈一下自己使用的消息函数查找的方法.本人萌新,如果有任何错漏与解释不清的地方,欢迎各路大佬指正 ...
- 时间>金钱
时间>金钱! 如果有机会,用你的金钱去换取别人的成功经验,一定要抓住一切机会向顶尖人士学习. 仔细选择你接触的对象,因为这会节省你很多时间. 假设与一个成功者在一起,他花了10年时间成功,你跟1 ...
- Lazarus 初识
Lazarus 使用 Free Pascal 的编译器,支持 Object Pascal 语言,与 Delphi 高度兼容,并看做后者的自由软件替代品. Lazarus 下载与安装 我们先去 Laza ...
- 解决Android Studio出现GC overhead limit exceeded
方法一: 修改项目目录下的gradle.properties,增加如下配置信息(红色文字中需要根据自己电脑的配置修改内存大小,其余的配置用于加快gradle的编译速度) org.gradle.daem ...
- grid - 使用相同的名称命名网格线和设置网格项目位置
1.使用repeat()函数可以给网格线分配相同的名称.这可以节省一定的时间 使用repeat()函数可以给网格线命名,这也导致多个网格线具有相同的网格线名称. 相同网格线名称指定网格线的位置和名称, ...
- 1154:LETTERS
题目链接http://bailian.openjudge.cn/practice/1154/ 总时间限制: 1000ms 内存限制: 65536kB 描述 A single-player game i ...
- Centos升级mongo客户端
一.背景 在宿主机centos上启一个Mongo容器,暴露端口21117,并设置用户名,密码(root/mongo) docker run --name mongo1 -p : -d mongo -- ...