better-scroll 踩坑

better-scroll 踩坑合集

1. better-scroll 失效

   根据 better-scroll 的实现原理，子元素应当比给 BS 的父元素大；

   better-scroll 只会对第一个子元素有效，因此一般给使用的元素包裹一层父元素；

2. 无法响应鼠标滚轮滚动

   better-scroll 无法点击，只需在创建时配置 click 为 true；

   better-scroll 无法实现内容滚动，需要配置 mouseWheel 为 true；

   const scrollConfig = {
       click: true;
       mouseWheel: true;
       // 可以传入一个对象，配置不同方向的动画
       bounce: {
       	top: false;
   	}
   }
   

3. 滚动事件与 better-scroll 不兼容

   ​ 如果同时使用锚点和 better-scroll ， better-scroll 的滚动对锚点没有反应。

   解决方法：

   // VUE
   mounted() {
       // 获取哈希值，以检测是否使用锚点
       const hash = this.$route.hash
       setTimeout(() => {
           // 获取 better-scroll 实例
           const a = ...
           if(hash) {
               a.scrollToElement(hash)
           }
       })
   }
   // React
   // 获取锚点元素高度
   const top = this.state.BScroll[0].wrapperOffset.top
   // 将 better-scroll 滚动到锚点
   if(top){
       this.state.BScroll[1].scrollTo(0,top)
   }
   

4. fixed 无效

   better-scroll 的滚动是用 transform 中的 translate 属性进行位移，但是使用 transform的话，子元素的 position：fixed 不再相对于可视区，而是相对于设置 transform 的父元素。

   方法：把 fixed 定位的元素从better-scroll 中取出来单独放置；