页面左右滑时，如何防止页面上下滑动

最近，做了一个项目，需要在手机端用H5写一个程序模仿苹果手机原生的左右菜单，如下图：

简单实现了功能后，发现手机端运行时会遇到一个问题，当我手指进行左右滑动菜单时，除非手指水平滑动，否则会造成屏幕上下滑动。仔细研究后，发现是由于手指不能保证水平滑动，因此在滑动时，会有一定的误差，导致屏幕认为手指进行了上下滑动的操作。因此解决办法如下：

1）在touchstart处，记录targetTouches.clientX，targetTouches.clientY，也就是手指开始时的坐标（x1，y1）

2）在touchmove处，同样记录targetTouches.clientX，targetTouches.clientY，也就是手指移动时的坐标（x2，y2）

3）通过start和move记录的坐标，计算手指移动的角度，可以通过计算cos，sin值来判断角度大小。

4）通过角度大小来控制父类的overflow-y的属性是否hidden。

这里举例说明下：

假设起始位置的坐标为（2，3），移动后的坐标为（1，1），如下图：

此时，通过简单计算可得出，x = 1，y = 2，z = √5

sin a = y/z = 2/ √5，

假设你定义手指滑动角度必须大于等于30°就判定为垂直上下滑动，小于30°则判断为非垂直上下滑动，

那么条件就是（sin 30° = 1/2）

if (sin a >= 1/2){

     可以上下滑动

}else{

     禁止上下滑动

}

另外，还有一点需要注意：由于手机端手指滑动的角度是从0°~360°，而sin曲线在0°~180°为正值，180°~360°为负值，因此在计算的时候，需要为x，y取绝对值，即x = |x1 - x2| ，y = |y1 - y2| 

最后附上自己简单写的一个左右拉动代码，欢迎查看：

https://github.com/chaoyidaozhan/swipeLeft