betterscroll使用总结

1、滚动满足的必要条件

所有需要滚动的元素需要被两个div包起来，第一个是wrapper，第二个是content

wrapper的高度固定，而content需要高度比wrapper大，content是wrapper唯一的子节点

所有需要滚动的元素列表放入content中

2、使用betterscroll以后，某些输入型元素事件失效

以elememt-ui的组件el-autocomplete和el-input-number说明：

在移动端，手指点击el-autocomplete的输入框后，会有备选项下拉列表弹出，但是收不起来。

better-scroll阻止了大多数的元素的事件，导致点击别的地方不会产生响应事件激活下拉列表的收起来。

阅读better-scroll源码bscroll.js发现，better-scroll源码中设置了option默认配置，如果在使用better-scroll的时候没有设置option的话，会使用option默认配置，option默认配置将会禁止除了INPUT|TEXTAREA|BUTTON|SELECT以外的所有元素的所有事件，让浏览器不会响应

可以使用preventDefault:false将所有元素的事件都开放出来，但是这样会有问题，因为betterscroll优化滑动体验，使用了动画和一些别的操作，如果全部开放的话，会导致滑动效果变差。

所以应该使用preventDefaultException开放特定tag的事件或者开放某些class元素的事件，但是要注意，preventDefaultException是直接覆盖默认的preventDefaultException的，所以如果需要使用输入型控件的话，需要将tagName: /INPUT|TEXTAREA|BUTTON|SELECT$/加上

调试这个问题的时候，可以使用chrome浏览器中的F12->Source->EventListenerBreakpoint，展开Mouse，勾选click就可以捕获页面上所有元素的click事件，通过Scope->Local->e可以查看该事件，在e.path中可以看到该事件最初的触发元素，以及事件冒泡所涉及的所有元素，直到window对象

el-input-number元素在使用betterscroll以后也点击不了，也是因为事件被禁用导致的。

3、滑动次数多了以后滑动不到最顶部或者最底部

目前可能有两个原因：

1、content的高度自动计算有问题，需要手动计算

2、preventDefault:false导致betterscroll事件紊乱，betterscroll优化滑动体验，依靠的是动画，和对一些元素的事件的禁用，preventDefault:false将所有元素的事件都开放以后betterscroll优化滑动体验将会变差