Swiper3的英文官網(wǎng)上有Scroll Container這么一個Demo，容器里邊的內(nèi)容在超出一個屏幕的長度后出現(xiàn)滾動條供下拉查看，此種用法非常適合于移動端文章內(nèi)容頁展示。這對大家來說，用起來是相當方便的，然而……在公司項目上使用時需要將這個內(nèi)容滾動區(qū)內(nèi)嵌Nested到一個正常的可左右滑屏的Swiper容器swiper-container下的swiper-slide容器中的時候，問題產(chǎn)生了，Pc端完美呈現(xiàn)，移動端出現(xiàn)滾動條消失，觸摸滑動無法下拉內(nèi)容區(qū)的大Bug。

1

Pc端的呈現(xiàn)的效果，注意我們指的不是外圍的那根滾動條，而是內(nèi)側虛擬出的那根偏黑色的滾動條。

Swiper版本：
Swiper3.31(目前最新版)

代碼是直接使用的官方示例，嵌套區(qū)外圍代碼也是官方示例，因此也不存在使用上的問題，試遍官方上的各種可能的屬性都無解，而且Google也找不到任何相關的解決辦法。我就納了悶了，難道大家都不這么用嗎？好吧，自己動手，豐衣足食……這期間不說我用了多久的時間，總之到了若干次想放棄的程度了……

其實歷盡各種調試糾結，最后解決問題的方法很簡單，把全局width從100之百改為99.99，另外加一個背景，防止某些瀏覽器出現(xiàn)這0.01所引起的小縫，盡管暫時還未發(fā)現(xiàn)_{^_^}；

  html, body {
        position: relative;
        height: 100%;
        margin: 0;
        padding: 0;
        width: 99.99%;
    background-color: #48cfaf;

    }

2 中間插入圖片有問題；

但Bug并未就此結束，調試過程中又發(fā)現(xiàn)了另一個只在移動端才會出現(xiàn)的Bug,只要內(nèi)容區(qū)中出現(xiàn)圖片標簽的話那么就完了——滑動再次失效，怎么滑都滑不下去了，不管圖片是位于容器中的哪個位置。外框的左右滑動如果出現(xiàn)類似問題可以先從圖片下手，倒是像Div和表單相關元素在里邊的話卻相安無事！

1.pic

怎么滑都滑不下去

最后終于搞惦了，不敢獨享，代碼貼圖如下，有需要的童鞋看過來……

源碼奉上：<a >swipertest</a>
附：使用的官方Swiper Demo地址

Tag：JavaScript, Swiper
發(fā)布時間：2015年06月07日
博客被黑，挪窩簡書安家……