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

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. 元数据管理器中存在错误。 实例化来自文件“\\?\C:\Program Files\Microsoft SQL Server\MSAS11.MSSQLSERVER\OLAP\Data\Tfs_Analysis.0.db\vDimTestCaseOverlay.874.dim.xml”的元数据对象时出错。

    一.发现问题 启动SQLSERVER的数据分析服务失败 查看系统日志错误如下: 双击错误后显示详细错误: 元数据管理器中存在错误. 实例化来自文件“\\?\C:\Program Files\Micro ...

  2. 咏南WEB APP开发框架

    咏南WEB APP开发框架 咏南WEB桌面框架演示:47.106.93.126:9999 咏南WEB手机框架本地:47.106.93.126:8077 咏南CS框架下载:https://pan.bai ...

  3. 巧用watch命令执行循环操作,来解放我们的双手

    有时候我们需要重复执行某个 命令,观察某个文件和某个结果的变化情况.可以写 脚本去实现这些需求,但是有更简单的方法,本文档要介绍的就是watch 命令. 1. 以固定时间反复执行某个命令 root@j ...

  4. 如何用Python计算Softmax?

    Softmax函数,或称归一化指数函数,它能将一个含任意实数的K维向量z"压缩"到另一个K维实向量\(\sigma{(z)}\)中,使得每一个元素的范围都在(0,1)之间,并且所有 ...

  5. python-写入excel(xlswriter)

     一.安装xlrd模块: 1.mac下打开终端输入命令: pip install XlsxWriter 2.验证安装是否成功: 在mac终端输入 python  进入python环境 然后输入 imp ...

  6. linux 杀死进程

    列车进程 ps -ef 杀死进程 - 后面是pid kill 1234356

  7. sort is deprecated, use sort_values(inplace=True) for INPLACE sorting

    排序是过时的,用sort_values(到位=真)为就地排序

  8. Java数据结构之LinkedList、ArrayList的效率分析

    前言: 在我们平常开发中难免会用到List集合来存储数据,一般都会选择ArrayList和LinkedList,以前只是大致知道ArrayList查询效率高LinkedList插入删除效率高,今天来实 ...

  9. (原)tensorflow使用eager在mnist上训练的简单例子

    转载请注明出处: https://www.cnblogs.com/darkknightzh/p/9989586.html 代码网址: https://github.com/darkknightzh/t ...

  10. 【VS2019】F12跳转到源码,关闭浏览器不停止项目【转】

    [VS2019]F12跳转到源码 1.工具->选项 2.文本编辑器->C#->高级->勾选支持导航到反编译源码 3.关闭浏览器不停止项目