admin管理员组

文章数量:1538748

前言

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

本文标签： 浏览器下一页历史

版权声明：本文标题：谷歌浏览器禁止右滑返回历史_移动端浏览器禁止左右滑动下一页 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1726981601a1092859.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。