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