hi,欢迎访问本站!
当前位置: 首页Web前端正文

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

墨初 Web前端 1614阅读

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

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

方法一:

使用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});

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

声明:无特别说明,转载请标明本文来源!
相关推荐