解决移动端滑动验证屏幕跟着动的方法

在一些移动的浏览器中，如果使用滑动验证的话，有时候会导致整个页面也移动。此现象与移动浏览器的设置有关，当然此问题也是可以解决，下面是几种解决方法，各位可以尝试一下。

移动端浏览器滑动验证屏幕跟着动的解决方法

方法一：

使用CSS代码来禁止浏览器的默认左右滑动行为，而touch-action属性值设置为none的将禁止浏览器滑动操作，注意不禁止浏览器的上下滑动操作。

例：

html{
    touch-action:none;
    touch-action:pan-y;
}

方法二：

使用js脚本来阻止浏览器左右滑动的行为。

var startX,startY;
document.addEventListener("touchstart",function(e){
    startX = e.targetTouches[0].pageX;
    startY = e.targetTouches[0].pageY;
});
document.addEventListener("touchmove",function(e){
    var moveX = e.targetTouches[0].pageX;
    var moveY = e.targetTouches[0].pageY;
    if(Math.abs(moveX-startX)>Math.abs(moveY-startY)){
        e.preventDefault();
    }
},{passive:false});

以上两种方法都可以阻止浏览器左右滑动的事件，个人可以根据自身的需求选择合适自己的方法。