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;
}