vue-perfect-scrollbar的应用

安装

npm install vue-perfect-scrollbar

应用

import VuePerfectScrollbar from 'vue-perfect-scrollbar/index.vue'
export default {
  components: {
    VuePerfectScrollbar
  },
  //...
}

example

<template>
  <VuePerfectScrollbar class="scroll-area" v-once :settings="settings" @ps-scroll-y="scrollHandle">
    <img src="./assets/azusa.jpg" height="720" width="1280" alt="">
  </VuePerfectScrollbar>
</template>
 
<script>
import VuePerfectScrollbar from 'vue-perfect-scrollbar'
 
export default {
  components: {
    VuePerfectScrollbar
  },
  name: 'app',
  data() {
    return {
      settings: {
        maxScrollbarLength: 60
      }
    }
  },
  methods: {
    scrollHandle(evt) {
      console.log(evt)
    }
  }
}
 
</script> 
<style lang="scss">
.scroll-area {
  position: relative;
  margin: auto;
  width: 400px;
  height: 300px;
}
</style> 

初始化

const scrollArea = document.querySelect(".scroll-area")
const scrollContent = new PerfectScrollbar("scrollArea ")
//或者只使用选择器字符串
const scrollContent = new PerfectScrollbar(".scroll-area")

包含配置选项初始化

const scrollContent = new PerfectSrollbar(".scroll-area",{
	wheelSpeed: 2,
  	wheelPropagation: true,
  	minScrollbarLength: 20
})

//如果容器或内容的大小发生变化，可以使用:
scrollContent.update()

可选的配置选项

handlers {String[]}
它是处理程序列表，用于滚动元素。
默认值：[‘click-rail’, ‘drag-thumb’, ‘keyboard’, ‘wheel’, ‘touch’]

wheelSpeed {Number}
应用于鼠标滚轮事件的滚动速度。
默认值：1

wheelPropagation {Boolean}
如果此选项为true，则在滚动到达侧面的末端时，mousewheel事件将传播到父元素。
默认值：true

swipeEasing {Boolean}
如果此选项为true，将简化滑动滚动。
默认值：true

其他的配置选项可以参考这里

vue-perfect-scrollbar对应的自定义事件

scrollContent .addEventListener('ps-scroll-x', () => ...);
//或者vue中
<VuePerfectScrollbar class="scroll-area" v-once :settings="settings" @ps-scroll-y="scrollHandle">

ps-scroll-y
当y轴沿任一方向滚动时，会触发此事件。

ps-scroll-x
当x轴沿任一方向滚动时，将触发此事件。

ps-scroll-up
向上滚动时触发此事件。

ps-scroll-down
向下滚动时触发此事件。

ps-scroll-left
向左滚动时触发此事件。

ps-scroll-right
向右滚动时触发此事件。

ps-y-reach-start
滚动到达y轴的起点时将触发此事件。

ps-y-reach-end
滚动到达y轴的末端时触发此事件（对于无限滚动很有用）。

ps-x-reach-start
滚动到达x轴的起点时，将触发此事件。

ps-x-reach-end
滚动到达x轴的末端时触发此事件。