最近使用vue做了一个移动端的项目，使用了js的scroll.js的滚动插件。由于是第一次使用，期间遇到过不少的问题，当然问人是不可能问人的，估计大家都比我忙，就只能自己解决啦，下面就一一列出问题和解决方案，希望对大家有帮助啦
- 简单说一下IScroll的DOM结构
- IScroll的初始化
还有更多的参数说明和调用方法请参考官网http://iscrolljs.com
- 问题集锦
1、为什么不使用原生的滚动条？
原因：原生的滚动在移动端使用时会影响到其他元素，带动其他元素一起滚动
解决方法：使用preventDefault属性屏蔽默认事件，滚动当前区域的时候就不会连带滚动其他元素
this.myScroll = new IScroll('#wrapper', {
preventDefault: true, //屏蔽默认事件
});
2、滚动条不随滚动而滚动
原因：如果配合插件使用原生的滚动条，在滚动时不会被监听，以至于在滚动时滚动区域在滚动，但是进度条不滚动
解决方法：隐藏原生滚动条，使用插件自带的滚动条
this.myScroll = new IScroll('#wrapper', {
scrollbars: true,//使用默认滚动条
});
3、滚动区域的click事件不能触发
原因：设置了preventDefault为true，屏蔽了click事件
解决方法：
this.myScroll = new IScroll('#wrapper', {
click:true,//解决使用IScroll之后click事件无效的问题
});
4、在使用滚动定位时（例如定位到内容的底部）
由于场景需要，在做功能时要求页面初始化时将聊天内容定位到最底部，在没有使用插件之前，我是用一个方法将内容滚动到底部，使用插件之后这个方法完全不适用
因为插件中是通过translate对滚动的位置进行实时监听，若是使用方法进行定位，translate对此监听不了，就会造成定位错误的问题
解决方法：
使用scrollTo方法进行定位
this.myScroll.scrollTo(0, (this.$refs.xwBody.clientHeight - this.$refs.xwBody.scrollHeight));
this.myScroll.refresh();