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

您所在的位置：网站首页 › 荣耀手机滑动验证整个屏都跟着动 › 解决移动端滑动验证屏幕跟着动的方法

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

2024-07-16 14:11| 来源: 网络整理| 查看: 265

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

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

方法一：

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

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

【本文地址】

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

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

今日新闻

推荐新闻