我们在使用swiper开发的时候，有时候会碰到这样一种情形：有一屏的高度超过了可视区域的高度，在这种情况下我们就要为这一屏添加滚动条，很多人都会想到iscroll插件，这两个插件相结合，思路是对得，但是当两个插件同时支持鼠标滑动操作的时候就会出现冒泡事件，有些人直接修改了源文件，我这里是不推荐的，其实，仔细查阅官方的帮助文件，我这里分享以下解决方案。

Swiper里面有一个参数：onTransitionStart:function(swiper){ }，在这里面是支持回调函数的，我们只要把ISCROLL的赋值声明通过这个回调函数传递过来就可以了。

如下：

var mySwiper = new Swiper (‘.swiper-container’, {
direction: ‘vertical’,
loop:false,
paginationClickable: true,
mousewheelControl : true,
autoplayDisableOnInteraction : false,
// 如果需要分页器
pagination: ‘.swiper-pagination’,
onTransitionStart:function(swiper){
mycall();

}
})

函数mycall的定义如下：

function mycall(){
var myScroll;
myScroll = new IScroll(‘.three’, {
zoom: true,
scrollbars: false,
mouseWheel: true,
interactiveScrollbars: true,
shrinkScrollbars: ‘scale’,
fadeScrollbars: false
});
myScroll.on(‘scrollEnd’, function () {
if (this.y ==0) {
myScroll.destroy();
myScroll.refresh();
}

});

其中myScroll.destroy()，意思是销毁mysroll，当滚动条滚动到顶端的时候就销毁这个滚动效果，这样一来，鼠标的滑动事件就只剩下swiper了，而当swpier执行的时候会通过回调函数再次创建这个scroll，这样一来，问题基本解决了。

本案例只在PC端测试过，移动端未测试。如有好的文字，欢迎分享！