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