移动端浏览器禁止左右滑动下一页

前言

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