vue-custom-scrollbar和vue-perfect-scrollbar

vue-custom-scrollbar和vue-perfect-scrollbar都是在Vue.js中使用的滚动条组件。它们都可以自定义样式并且兼容多种浏览器。vue-custom-scrollbar支持使用鼠标滚轮和触摸来滚动内容，并且可以设置永久性滚动条或滚动条在滚动时才显示。而vue-perfect-scrollbar支持配置滚动条和内容之间的距离，支持鼠标悬停显示滚动条等高级功能。

相关问题

vue-custom-scrollbar和vue-perfect-scrollbar 浏览器兼容性

Vue-custom-scrollbar和Vue-perfect-scrollbar两个库都是基于Vue.js框架开发的自定义滚动条插件。它们在主流浏览器上的兼容性都很好，包括Chrome、Firefox、Safari、Opera和IE11及以上版本。但是需要注意的是，在移动端上的体验可能会有所不同。建议在实际使用前进行测试和调试。

vue-perfect-scrollbar 滚动条置底

Vue-perfect-scrollbar是一个可以自定义样式的滚动条组件，可以通过CSS样式来实现滚动条置底的效果。

首先，你需要在Vue组件中引入vue-perfect-scrollbar：

import PerfectScrollbar from 'vue-perfect-scrollbar'
import 'vue-perfect-scrollbar/dist/vue-perfect-scrollbar.css'

然后，在模板中使用`vue-perfect-scrollbar`组件包裹需要添加滚动条的内容，并添加`@scroll`事件监听滚动：

<template>
  <div class="wrapper">
    <perfect-scrollbar @scroll="onScroll">
      <!-- 需要添加滚动条的内容 -->
    </perfect-scrollbar>
  </div>
</template>

接着，在组件的`mounted`钩子中，通过`$refs`获取到`vue-perfect-scrollbar`组件实例，再获取到它内部的滚动区域，并将滚动条滚动到底部：

mounted () {
  this.$nextTick(() => {
    const ps = this.$refs.scroll.$el.querySelector('.ps')
    ps.scrollTop = ps.scrollHeight
  })
},
methods: {
  onScroll () {
    const ps = this.$refs.scroll.$el.querySelector('.ps')
    if (ps.scrollTop === ps.scrollHeight - ps.clientHeight) {
      // 滚动到底部了
    }
  }
}

通过上面的代码，我们可以在组件加载完成后将滚动条滚动到底部，同时在滚动时判断是否已经滚动到底部。

最后，在CSS中设置滚动条的位置为底部即可：

.ps__rail-y {
  bottom: 0;
  top: auto;
}