Swiper3的英文官网上有Scroll Container这么一个Demo，容器里边的内容在超出一个屏幕的长度后出现滚动条供下拉查看，此种用法非常适合于移动端文章内容页展示。这对大家来说，用起来是相当方便的，然而……在公司项目上使用时需要将这个内容滚动区内嵌Nested到一个正常的可左右滑屏的Swiper容器swiper-container下的swiper-slide容器中的时候，问题产生了，Pc端完美呈现，移动端出现滚动条消失，触摸滑动无法下拉内容区的大Bug。
1
Pc端的呈现的效果，注意我们指的不是外围的那根滚动条，而是内侧虚拟出的那根偏黑色的滚动条。
Swiper版本：
Swiper3.31(目前最新版)
代码是直接使用的官方示例，嵌套区外围代码也是官方示例，因此也不存在使用上的问题，试遍官方上的各种可能的属性都无解，而且Google也找不到任何相关的解决办法。我就纳了闷了，难道大家都不这么用吗？好吧，自己动手，丰衣足食……这期间不说我用了多久的时间，总之到了若干次想放弃的程度了……
其实历尽各种调试纠结，最后解决问题的方法很简单，把全局width从100之百改为99.99，另外加一个背景，防止某些浏览器出现这0.01所引起的小缝，尽管暂时还未发现^_^；
html, body {
position: relative;
height: 100%;
margin: 0;
padding: 0;
width: 99.99%;
background-color: #48cfaf;
}
2 中间插入图片有问题；
但Bug并未就此结束，调试过程中又发现了另一个只在移动端才会出现的Bug,只要内容区中出现图片标签的话那么就完了——滑动再次失效，怎么滑都滑不下去了，不管图片是位于容器中的哪个位置。外框的左右滑动如果出现类似问题可以先从图片下手，倒是像Div和表单相关元素在里边的话却相安无事！
1.pic
怎么滑都滑不下去
最后终于搞惦了，不敢独享，代码贴图如下，有需要的童鞋看过来……
源码奉上：<a href="http://pan.baidu.com/s/1pLCX2Pl">swipertest</a>
附：使用的官方Swiper Demo地址
Tag：JavaScript, Swiper
发布时间：2015年06月07日
博客被黑，挪窝简书安家……
网友评论