浏览器左右滑动翻页与页面中左右滑动冲突

关于浏览器左右滑动翻页与页面中左右滑动冲突的问题
最近做了一个手机端的网站,用到轮播图(可以左右滑动切换上一张或下一张),发现与浏览器左右滑动前进后退发送冲突,导致轮播图无法手动切换。于是开始寻找解决方法:
第一种:

document.addEventListener('touchmove',function(event){
	event.preventDefault();
},false);

这种方法是直接禁用浏览器的滑动事件,禁止浏览器左右滑动实现前进后退,可以解决大多数浏览器的问题,不足点是用户体验偏差,如果你用的是搜狗浏览器或者小米手机自带的浏览器,这种方法不起作用。但是如果你用的是 百度浏览器 ,这种方法会导致整个页面无法滑动,只能看到可视区域的内容。所有直接这样写是存在问题的。
第二种:

$('.slideshowBox').each(function(index, el) {
	el.addEventListener('touchmove', function (event) {
		event.preventDefault();
	}, false);
});

slideshowBox是你需要手动滑动的父类,禁止当前区域的浏览器默认事件不会影响浏览器的左右滑动前进后退功能,而且所有浏览器均适配,包括上面说到的第一种方法不适用的三款浏览器。

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值