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

前言

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AGI阅读 16,018评论 3 119
  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,543评论 1 11
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,252评论 4 61
  • 随着ACI 的部署,网络编程的需求大量增加。客户的网络需要自动化,这就需要编程实现。 能够提供编程的培训公司非常多...
    taoza阅读 1,007评论 0 4
  • 梁冬敬读《八万四千问》 文:锦璱 我记得张德芬老师曾在她的书里这样写道:“心想事成是每个人与生俱来的能力。” 世间...
    锦璱年华阅读 546评论 0 1