使用js scroll.js踩过的坑坑坑坑坑....

最近使用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();

5、滚动时控制台报错

描述：pc端浏览器用滚动轮滚动不报错，使用单击键拖拽滚动时报错
解决方法：

* {
		// 解决滚动时报错
		touch-action: pan-y;
	}

6、安卓手机端使用滚动时有卡顿，ios设备上使用正常
解决方法：在项目入口文件中加上下面代码