Swiper3的英文官网上有Scroll Container这么一个Demo,容器里边的内容在超出一个屏幕的长度后出现滚动条供下拉查看,此种用法非常适合于移动端文章内容页展示。这对大家来说,用起来是相当方便的,然而……在公司项目上使用时需要将这个内容滚动区内嵌Nested到一个正常的可左右滑屏的Swiper容器swiper-container下的swiper-slide容器中的时候,问题产生了,Pc端完美呈现,移动端出现滚动条消失,触摸滑动无法下拉内容区的大Bug。
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和表单相关元素在里边的话却相安无事!
怎么滑都滑不下去
最后终于搞惦了,不敢独享,代码贴图如下,有需要的童鞋看过来……
源码奉上:<a href="http://pan.baidu.com/s/1pLCX2Pl">swipertest</a>
附:使用的官方Swiper Demo地址
Tag:JavaScript, Swiper
发布时间:2015年06月07日
博客被黑,挪窝简书安家……