使用vue-custom-scrollbar自定义滚动条

凡大来啦

已于 2024-08-13 11:06:40 修改

阅读量190

点赞数 3

文章标签： vue.js 前端 javascript

于 2024-08-13 11:04:18 首次发布

本文链接：https://blog.csdn.net/u011690675/article/details/141158389

版权

https://github.com/Binaryify/vue-custom-scrollbar

众所周知，谷歌浏览器支持自定义滚动条，但是火狐或其他浏览器不支持，如果你希望你的网站更完美，可以使用vue-custom-scrollbar

<template>
 <div>
  <vue-custom-scrollbar class="scroll-area"  :settings="settings" @ps-scroll-y="scrollHanle">
    <section style="width: 1280px; height: 720px;"></section>
  </vue-custom-scrollbar>
</div>
</template>
<script>
/**
 * For Vue2/Vue3
*/
import vueCustomScrollbar from 'vue-custom-scrollbar'
import "vue-custom-scrollbar/dist/vueScrollbar.css"
/**
 * For vite
*/
import vueCustomScrollbar from 'vue-custom-scrollbar/src/vue-scrollbar.vue'

export default {
  components: {
    vueCustomScrollbar
  },
  data() {
    return {
      settings: {
        suppressScrollY: false,
        suppressScrollX: false,
        wheelPropagation: false
      }
    }
  },
  methods: {
    scrollHanle(evt) {
      console.log(evt)
    }
  }
}
</script>
<style >
.scroll-area {
  position: relative;
  margin: auto;
  width: 600px;
  height: 400px;
}
</style>