Vue Better-Scroll 横向滚动失效，解决方法及心得

Vue Better-Scroll 横向滚动失效，解决方法及心得

菜鸟之言，请多指教

1.Better-Scroll滚动原理

中文文档地址：点我
有时中文文档地址会短暂失效，尚不明确什么原因，请多次刷新或者稍后重试

在一个容器内，让内部第一个元素超出滚动。

1. 外部容器(wrapper容器)超出隐藏，即：overflow:hidden
2. 外部容器需定义宽度或高度(因为内部容器超过外部容器才能滚动）
3. 内部容器需定义高度或宽度。注：如果是竖向滑动，则内部容器高度不用定义。但横向的滚动，则有可能需要利用js调整宽度。(css会有问题）

2.Better-Scroll横向滚动

查阅文档后我发现，横向滚动有几种方法。

 1.scrollX，默认为false，设置为true时，则开启横向滚动
 2.freeScroll，默认为false，设置为true时，则开始支持横向滚动的支持
 3.eventPassthrough，默认为‘’，设置为‘horizontal’，则开始支持横向滚动的支持

在满足本文‘Better-Scroll滚动原理’的三个条件下，经多次测试和烧脑研究后，发现：

1. scrollX单独为true时，确实可以横向滚动，纵向不受任何影响
2. scrollX为true，并且freeScroll为true时，亦可以滚动，但是横向滚动时，纵向亦会动一点，体验不太好
3. scrollX为true，并且eventPassthrough为‘horizontal’时，不能滚动！并且eventPassthrough配置失效。原因不得而知
4. scrollX为true，并且freeScroll为true时，并且eventPassthrough为‘horizontal’时，又可以完美滚动了。。。

3.心得

1. scrollX就可以开启横向滚动了
2. eventPassthrough为‘horizontal’，这个是有用的，例如better-scroll + swiper 嵌套时可用。可以开启横向的切换页面，体验和原生app效果差不多
3. freeScroll为true时，和eventPassthrough一样，两者皆有的话亦不影响

如有不对之处，请多指教。