Vue.JS simple but perfect custom scroll bar assembly (using utatti / Perfect-ScrollBar , so if you encounter some problems, you can view perfect-scrollbar
the 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)
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~
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.
scrollTop
and scrollLeft
/ the Use Plain scrollTop
andscrollLeft
<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>
Author: Binaryify
Demo: https://binaryify.github.io/vue-custom-scrollbar/
Source Code: https://github.com/Binaryify/vue-custom-scrollbar
#vuejs #vue #javascript