table 手机 滑动_移动端touch事件滚动
本来想用在北京欢乐谷手机上用touch事件来模拟局部左右内容滚动里,但在touchmove上下滚动时由于禁止了默认事件而body滚动条不能滚动,虽然可以根据touchmove的坐标来判断方向,但体验效果不理想。
后来在查询相关资料后原来可以直接在css中使用overflow:auto;出来的滚动条用CSS3的-wekit-scrollbar{display:none}来隐藏;
*拓展
*::-webkit-scrollbar 滚动条整体部分
*::-webkit-scrollbar-thumb 滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条)
*::-webkit-scrollbar-track 滚动条的轨道(里面装有Thumb)
*::-webkit-scrollbar-button 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。
*::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)
*::-webkit-scrollbar-corner 边角,即两个滚动条的交汇处
*::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
touch事件来模拟局部左右内容滚动
判断很简单,touchmove的最后坐标减去touchstart的起始坐标,X的结果如果正数,则说明手指是从左往右划动;X的结果如果负数,则说明手指是从右往左划动;Y的结果如果正数,则说明手指是从上往下划动;Y的结果如果负数,则说明手指是从下往上划动。
if ( X > 0) {
alert("left 2 right");
}else if ( X < 0) {
alert("right 2 left");
}else if ( Y > 0) {
alert("top 2 bottom");
}else if ( Y < 0) {
alert("bottom 2 top");
}else{
alert("just touch");
}
这再逻辑上没有任何问题。但在实际操作中,手指的上下滑动其实是很难直上直下的,只要稍微有点斜,就会被X轴的判断先行接管。
那么接下来加上特别的判断技巧:增加的判断也很简单,无非就是判断哪个的差值比较大。
if ( Math.abs(X) > Math.abs(Y) && X > 0) {
alert("left 2 right");
}else if ( Math.abs(X) > Math.abs(Y) && X < 0) {
alert("right 2 left");
}else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {
alert("top 2 bottom");
}else if ( Math.abs(Y) > Math.abs(X) && Y < 0) {
alert("bottom 2 top");
}else{
alert("just touch");
}
code
functiontouchTable(){var moveTable = document.getElementById("showtime_bj"); //item_ID
var $win =$(window);var tableWidth =moveTable.offsetWidth;var halfWidth = tableWidth/2;
var objTouches = null;var startx,starty,tableLeft,distx=0,disty=0;
console.log(tableWidth)//绑定touchstart事件
moveTable.addEventListener("touchstart",touchStart,false);functiontouchStart(e){
objTouches= e.changedTouches[0];
tableLeft=parseInt(moveTable.style.left)
startx=parseInt(objTouches.pageX);
starty=parseInt(objTouches.pageY);//document.body.addEventListener('touchmove', bodyScroll, false);
}//绑定touchmove事件
moveTable.addEventListener("touchmove",touchMove,false);functiontouchMove(e){
objTouches= e.changedTouches[0];
distx= parseInt(objTouches.pageX) -startx;
disty= parseInt(objTouches.pageY) -starty;//判断touch滑动的方向
if (disty > 10 || disty < -10) {
document.body.removeEventListener('touchmove', bodyScroll, false); //向上向下滑动时恢复body的滚动条事件
}else if (distx > 0 ||distx < 0) {
document.body.addEventListener('touchmove', bodyScroll, false); //向上向下滑动时取消body的滚动条事件
moveTable.style.left = ((tableLeft + distx < -halfWidth) ? -halfWidth : (tableLeft + distx > 0) ? 0 : tableLeft + distx) + "px";
}
}//绑定touchend,touchcancel事件,当手指离开时事件
moveTable.addEventListener("touchend touchcancel",touchEnd,false);functiontouchEnd(e){
document.body.removeEventListener('touchmove', bodyScroll, false); //恢复body的滚动条事件
}functionbodyScroll(e){
e.preventDefault();
}
}
table 手机 滑动_移动端touch事件滚动相关推荐
- table 手机 滑动_【推荐下载】html5手机端手指滑动选项卡滚动切换效果(转)
html5 手机端手指滑动选项卡滚动切换效果 ( 转 ) 2017/09/25 41 !DOCTYPE html html lang="en" head meta charset= ...
- demo h5 touch 移动_H5案例分享:移动端touch事件判断滑屏手势的方向
移动端touch事件判断滑屏手势的方向 方法一 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标 ...
- 移动端touch事件和click事件的区别
移动端touch事件和click事件的区别 1.touch事件 以下是四种touch事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动 ...
- android touch事件无反应,移动端touch事件
当用户手指放在移动设备在屏幕上滑动会触发的touch事件 webkit: touchstart--当手指触碰屏幕时候发生.不管当前有多少只手指 touchmove--当手指在屏幕上滑动时连续触发.通常 ...
- 移动端touch事件 touchstart、touchmove、touchend
移动端touch事件 touchstart.touchmove.touchend touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发.touchmove事件:当手指 ...
- 搞定移动端一(移动端 touch 事件,TouchEvent 对象)
移动端事件 1.目标 掌握移动端 touch 事件使用 掌握 touch 事件和 mouse 事件的区别 掌握 touchEvent 实现移动端幻灯片 2.移动端touch事件 touchstart ...
- 移动端 touch事件 过渡事件 动画事件
移动端首先要书写meta标签 <meta type="viewport" content="width=device-width,user-scalable=no, ...
- 移动端touch事件---利用bootstrap实现轮播图手指左右滑动事件
还记的我上篇文章实现了图片响应式滑动,如果不知道怎样实现图片在超宽屏幕居中显示,且也不知道怎样实现图片的响应式效果(专门针对移动端的),可以再继续看看我写的这篇文章.狠狠地点击这里 那么针对移动端,如 ...
- 实现移动端touch事件的横向滑动列表效果
要实现手机端横向滑动效果并不难,了解实现的原理及业务逻辑就很容易实现.原理:touchstart(手指按下瞬间获取相对于页面的位置)-->touchmove(手指移动多少,元素相应移动多少). ...
- click和touchmove vue_移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法...
这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来. 做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且to ...
最新文章
- 小米用户画像实战(附48页PPT)
- 【异常】Error: ERROR 1012 (42M03): Table undefined. (state=42M03,code=1012)
- 详细设计 存储分配_10k+点赞的 Spring Boot 后台管理系统竟然出了详细教程!爱了!...
- python flask html模板,python flask web开发实战 Jinja2模板
- POJ3628:Bookshelf 2【01背包】
- SSM框架笔记06:初探Spring——采用XML配置方式
- Mysql学习总结(15)——Mysql错误码大全
- 计算机辅助初中数学教学,计算机辅助数学教学的优势
- 【答辩问题】计算机专业本科毕业设计答辩自述
- Python 测试(一)—— doctest
- java orientation_Java WritableCellFormat.setOrientation方法代码示例
- 解决树莓派中文显示框框乱码
- 为什么计算机打不开优盘,U盘打不开,且8G的U盘只报64M,为什么?
- my.cnf配置详解
- 给定一个成绩a,使用switch结构求出a的等级。A:90-100,B:80-89,C:70-79,D:60-69,E:0~59
- 22KDD : COSTA Covariance-Preserving Feature Augmentation for Graph Contrastive Learning
- 【NISP一级】1.3 网络空间安全政策与标准
- android 仿微视,腾讯微视和抖音一样?模仿还是照搬?
- 选型宝访谈:当超融合一体机,具备云计算的基因,将会怎样?
- OCIEnvCreate 失败, 返回代码为-1,但错误消息文本不可用 解决办法