前言
目前移动端的页面大多涉及到app,浏览器和微信、qq等内置的终端环境中。但一般用户浏览器中开启了滑动切换下页功能的话,所有的左右滑动交互涉会触发该功能导致无法实现。常见的就是注册页时候的左右滑动无法正常验证,一般发生下浏览器环境中。
常见解决
处于用户体验的情况,能不干扰左右翻页的情况下,就尽量去解决下。问题的根本也就是body的滑动时候触发了浏览器的默认判断机制。只需要进行preventDefault的行为阻止即可。
//阻止左右翻页
var xStart, xEnd, yStart, yEnd;
document.addEventListener("touchstart", function (evt) {
xStart = evt.touches[0].pageX;
yStart = evt.touches[0].pageY;
}, false);
document.addEventListener('touchmove', function (evt) {
xEnd = evt.touches[0].pageX;
yEnd = evt.touches[0].pageY;
//左右滑动
if(Math.abs(xStart - xEnd) > Math.abs(yStart - yEnd)){
evt.preventDefault();
}
}, false);
附录
触发条件在于浏览器翻页判断机制是边缘判断还是左右滑屏决定,有兴趣可以试试。
不触发:小米自带,safari
触发:华为自带浏览器,qq浏览器,uc浏览器