谷歌浏览器禁止右滑返回历史_移动端浏览器禁止左右滑动下一页

前言

目前移动端的页面大多涉及到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浏览器