Minimalistic but perfect custom scrollbar component for Vue.JS

vue-custom-scrollbar

Vue.JS simple but perfect custom scroll bar assembly (using utatti / Perfect-ScrollBar , so if you encounter some problems, you can view perfect-scrollbarthe warehouse)

Minimalistic but perfect custom scrollbar component for Vue.JS(using utatti/perfect-scrollbar, so if you have any question, you also can check the perfect-scrollbar repo)

Why custom scrollbar/Why custom scrollbar

As we all know, Google Chrome supports custom scroll bars, but Firefox or other browsers do not. If you want your website to be more perfect, use this component~

As you know, Chrome support custom scrollbar, but Firefox or other browsers don’t support it, if you want your website perfect, please use this component~

Why use vue-custom-scrollbar?/Why use vue-custom-scrollbar?

vue-custom-scrollbar It is a simple but perfect custom scroll bar component of Vue.JS

vue-custom-scrollbar is minimalistic but perfect scrollbar component for Vue.JS.

• No change on design layout
• Don’t need to manipulate DOM manually
• Using common scrollTopand scrollLeft/ the Use Plain scrollTopandscrollLeft
• Scrollbar style is fully customizable
• Efficient update on layout change

Documents/Docs

Docs

Example

<template>
 <div>
 <vue-custom-scrollbar class="scroll-area"  :settings="settings" @ps-scroll-y="scrollHanle">
    <img src="http://utatti.github.io/perfect-scrollbar/azusa.jpg" height="720" width="1280" alt="">
  </vue-custom-scrollbar>
 </div>
</template>
<script>
import vueCustomScrollbar from 'vue-custom-scrollbar'
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>

Download Details:

Author: Binaryify

Demo: https://binaryify.github.io/vue-custom-scrollbar/

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

#vuejs #vue #javascript