前言

日常开发中我们经常用到滚动条去展示数据，浏览器自带的滚动条看起来不太美观，我们可以通过css样式修改或者用ui组件比如el-scrollbar去修改。如果我们想要拓展滚动的功能，那么可能就需要下载插件，下面我来介绍一个好用的滚动插件——BetterScroll2.0插件。

BetterScroll

BetterScroll——更好的插件，简单直白，该插件确实做到了这点，它适应各种的滚动项目需求，支持移动端与pc端，用起来也非常的简单。标题上所写的是2.0，那么它也就有1.0了，2.0跟1.0最大的区别就是2.0将核心包进行了拆分支持按需加载，这也是推荐2.0的原因，它能够减少打包的体积。BS滚动原理跟原生浏览器一样，父容器高度固定，当子元素高度超过父容器就能进行滚动了。接下来我们从一个案例入手，了解BS的使用。

下载

上面提到了BS2.0可以按需加载，日常我们直接下载@better-scroll/core即可，它包含了核心代码，能够支持滚动能力。

npm install @better-scroll/core --save
yarn add @better-scroll/core

我们也可以安装better-scroll，就能应用该插件的所有功能。插件的使用也非常简单，我们在需要的页面引入该插件，挂载到具体dom就大功告成了。

    import BScroll from '@better-scroll/core'
    const ele = new BScroll(元素类名, {
    })

实例

我们用vue写一个滚动列表，这里我运用了Tailwind CSS书写样式，它就是样式的集合，开发中直接在写对应的类名就可以，避免了简单重复的css书写，想体验的话可以下载配置一下，嫌麻烦的直接用CSS。

   <template>
 <div ref="bsRef" class="h-96 overflow-hidden">
    <div>
      <div
        class="h-20 w-20 bg-slate-500 m-2 flex justify-center items-center"
        v-for="item in list"
        :key="item.value"
        ref="itemRefs"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Item {
  name: string
  value: number
}
const list: Item[] = [
  {
    name: '1',
    value: 1,
  },
  {
    name: '2',
    value: 2,
  },
  {
    name: '3',
    value: 3,
  },
  {
    name: '4',
    value: 4,
  },
  {
    name: '5',
    value: 5,
  },
  {
    name: '6',
    value: 6,
  }
]
</script>

接下来我们用BS去绑定一下：

   import BScroll from '@better-scroll/core'
   
   const bsRef = ref<HTMLDivElement | null>(null)
   let ele = null
   const initScroll = () => {
  if (bsRef.value) {
    ele = new BScroll(bsRef.value)
  }
}
onMounted(() => {
  initScroll()
})

挂载完之后，就可以根据需要设置配置项，我们可以了解下常用的配置项与方法，剩下的我们去官网查找即可。

• startX/Y:设置横纵轴的位置。
• scrollX/Y:设置横纵滚动条，其中y轴默认为ture，x轴为false。
• preventDefault:是否阻止默认事件，默认为ture，也就是说BS里面内容点击、复制等功能都会被阻止，之所以这么做我猜是为了更好地兼容插件自身的功能。
• preventDefaultException:设置不会被阻止默认事件的dom元素。这个属性就是为了解决preventDefault所带来的影响，我们设置正则表示式去匹配dom元素，比如tagName(标签名)、className(类名)。默认值为 { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|AUDIO)$/}，后面跟的必须是正则表达式。
• refresh()：刷新方法。
• stop():停止方法。
• scrollToElement():滚动到某个dom元素位置，利用该方法可以做定位跳转功能，接受四个参数： el:目标元素。 time:动画时长。 offsetX:元素x轴偏移量。 offsetY:元素y轴偏移量。 easing:动画移动函数。 下面我们就用该方法做一个跳转的功能，我们在旁边写一个按钮，点击之后自动跳转到第六个div元素。

    <el-button @click="jump">跳转</el-button>
    
   const itemRefs = ref([])
   //点击之后就会滚动出来第六个元素快
   const jump = () => {
  ele.scrollToElement(itemRefs.value[5], 1000, 0)
}

注意代码中v-for与ref结合使用的方式需要v3.2.25及以上的版本。

插件功能

BS适配了移动端与PC端，在PC端可以用鼠标滚轮控制滚动，BS2.0针对滚轮滚动事件拓展了相关功能，除此之外还有下拉刷新等功能，我们需要使用插件来开启这些功能。 插件是2.0从1.0解耦出来的功能，使用时我们需要单独下载依赖包，我们以滚轮为例，先安装：

   yarn add @better-scroll/mouse-wheel

然后引入，用BSroll.use方法去注册插件，在挂载dom时可以设置相关的配置项。

• speed:设置滚动速度。

• invert:设置滚轮与滚动跳方向是否一致。

• dampingFactor:设置阻尼系数，达到真实效果。

• easeTime:动画时长。

• discreteTime:检测滚动结束的时间。

• throttleTime:节流时间，因为滚动是高频事件，可以设置节流时间提升下性能。

  除此之外我们还可以使用scrollbar插件来替换掉浏览器自带的滚动跳，使用方法跟mouse-wheel一样。

import ScrollBar from '@better-scroll/scroll-bar'
BScroll.use(ScrollBar)

我们可以利用这两个插件来丰富滚动功能，直接设置相关的配置项：

    ele = new BScroll(bsRef.value, {
      mouseWheel: {
        speed: 5,
      },
      scrollbar: {
        //渐隐效果
        fade: true,
        // 滚动条交互
        interactive: false,
      },
    })

插件让BS功能更加强大，而且我们还能按需加载对应功能，还是很方便的。

总结

BS让滚动更加方便，如果你想要找一个滚动插件，不妨试一试BS。需要注意的是BS默认对第一个子元素为content监听元素，可以使用specifiedIndexAsContent去配置；BS会阻止元素的默认事件，需要用preventDefault或preventDefaultException去配置。