swiper如何防止冲突_H5使用Swiper过程中遇到的滑动冲突

一、问题

(1)PC端可以鼠标可以拖动中间的轮子让页面上下滑动，点击左键按着也是拖不动

(2)手机端浏览H5手指不能滑动页面，导致很多页面下面的文字看不到

二、解决问题

1.下面分先说css的问题，主要排查overflow：hidden；

检查也有一定的顺序，检查超出高度的标签是否用了overflow：hidden；最好先检查html或body是不是加了height：100%；overflow：hidden；然后再看包裹在最外边的元素是否加了overflow：hidden;

2.再说下js方面的问题，主要是有在touchstart、touchmove或touchend等事件中的阻止默认事件的原因

例如：$("#myCarousel").on("touchstart", function (e) {

e.preventDefault();

startX = e.originalEvent.changedTouches[0].pageX,

startY = e.originalEvent.changedTouches[0].pageY;

})；

这种代码其中e.preventDefault();会阻止掉默认的滚动行为。

问题核心：

排查CSS，排查JS，引用的第三方的JS库问题，例如我的swiper.min.js中就有很多 e.preventDefault();    的东西

比如css中我的也有overflow：hidden;的东西

解决问题：目前的解决方案是注释掉了项目中swiper的部分样式引用，如下面的代码，在最外面的容器中不适用swiper，存放图片的容器可以使用swiper的滑动功能

另外附上swiper的初始化代码

var mySwiper = new Swiper('.swiper-container',{

passiveListeners :false,

direction :'vertical',

autoplayDisableOnInteraction :false,

loop:false});var mySwiper2 = new Swiper('.swiper-container2',{

pagination :'.swiper-pagination',

loop :true,

onSlideChangeEnd:function(swiper){

}

});