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优化滑动体验将会变差

你可能感兴趣的:(betterscroll使用总结)