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){
        }
    });