本来想用在北京欢乐谷手机上用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

function touchTable(){
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);
function touchStart(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);
function touchMove(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);
function touchEnd(e){
document.body.removeEventListener('touchmove', bodyScroll, false); //恢复body的滚动条事件
} function bodyScroll(e){
e.preventDefault();
}
}

移动端touch事件滚动的更多相关文章

  1. H5案例分享:移动端touch事件判断滑屏手势的方向

    移动端touch事件判断滑屏手势的方向 方法一 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标 ...

  2. 移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法

    这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来. 做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且to ...

  3. 移动端touch事件 || 上拉加载更多

    前言: 说多了都是泪,在进行项目开发时,在上拉加载更多实现分页效果的问题上,由于当时开发任务紧急,所以就百度找了各种移动端的上拉下拉 实现加载更多的插件.然后就留下了个坑:上拉加载的时候会由于用户错误 ...

  4. 移动端touch事件实现页面弹动--小插件

    动手之前的打盹 说实话真的是好久没有更新博客了,最近一直赶项目,身心疲惫:最关键的是晚上还要回去上一波王者,实在是忙啊! 这周下来,清闲了些许,或许是因为要到国庆的缘故吧,大家都显得无精打采.俗话说的 ...

  5. 原生js移动端touch事件实现上拉加载更多

    大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: //获取要操作的元素 var objSection = document.ge ...

  6. 移动端 touch 事件的originalEvent

    对于移动端的触摸事件,我们通过touchstart.touchmove.touchend实现,PC端一般使用mousedown.mousemove.mouseup实现. 我们获取事件坐标,原生js获取 ...

  7. 移动端Touch事件基础

    1.三个常用的移动端事件 ontouchstart 手指按下时触发 ontouchmove 手指移动时触发 ontouchend 手动抬起时触发 注意:这些事件当作事件属性使用时,不兼容谷歌浏览器. ...

  8. 移动端 Touch 事件

    在移动端页面开发时,常常会用到touch事件,比如左滑右滑的轮播等.常用的触摸事件有touchstart,touchmove,touchend. 每个事件包含下面三个用于跟踪虎摸的属性: touche ...

  9. 移动端touch事件封装

    <meta charset="utf-8"><meta name="viewport" content="width=device- ...

随机推荐

  1. c# dataTable 合并两个列到一个新列中

    public static DataTable UniteDataTableColumns(DataTable dt, String newColumnName, string ColumnName1 ...

  2. Web API(二):Web API概述

    一.什么是API API(Application Programming Interface)即应用程序编程接口,是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能 ...

  3. 数据库 Oracle监听实例详解

    Oracle实例别名 IMCDB = (DESCRIPTION = (ADDRESS = (PROTOCOL = TCP)(HOST = localhost)(PORT = )) (CONNECT_D ...

  4. C++ 判断目录是否存在并新建目录

    http://blog.csdn.net/u012005313/article/details/50688257 #include <io.h> #include <string&g ...

  5. 第二百八十六节,MySQL数据库-MySQL事务操作(回滚)

    MySQL数据库-MySQL事务操作(回滚) 事务用于将某些操作的多个SQL作为原子性操作,一旦有某一个出现错误,即可回滚到原来的状态,从而保证数据库数据完整性. 举例:有这样一张表 从表里可以看出张 ...

  6. e669. 绘制缓冲图像

    To draw on a buffered image, create a graphics context on the buffered image. // Create a graphics c ...

  7. C# HttpRequest基础连接已经关闭: 接收时发生意外错误

    在c#中使用HttpWebRequest时,频繁请求一个网址时,过段时间就会出现“基础连接已经关闭: 接收时发生意外错误”的错误提示. 将webRequest的属性设置成下面的,经测试可以解决. we ...

  8. DTD -- XML验证

    DTD(文档类型定义)的作用是定义 XML 文档的合法构建模块. DTD 可被成行地声明于 XML 文档中,也可作为一个外部引用. DTD简介 内部的 DOCTYPE 声明 假如 DTD 被包含在您的 ...

  9. mysql -- 模糊查询的四种方法

    摘录自:http://www.jb51.net/article/48315.htm 1 %:表示任意0个或多个字符.可匹配任意类型和长度的字符,有些情况下若是中文,请使用两个百分号(%%)表示. 比如 ...

  10. centos6.5的软件安装,用户管理等

    1.软件的安装命令: 第一种:以 软件名.rpm 为结尾的二进制文件,这样的文件的安装 rpm -ivh 软件名.rpm i 是 install v 是校验 h 进度 卸载软件 是 rpm -e 软件 ...