easier-scroll-vue v1.0.5

easier-scroll-vue

easiser-scroll in Vue

more detail see https://github.com/Stan-BK/easier-scroll#readme

Install

npm install easier-scroll-vue

Usage

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import EasierScroll from 'easier-scroll-vue'
const app = createApp(App)

// Easier-Scroll component will be registered as a global component, you can use it directly in template
app.use(EasierScroll)
app.mount('#app')

// template.vue

<script setup>
const X = ref(0)
const Y = ref(0)
const isHidden = ref(true)

// when scrollPercentX been updated, this function willfiled, and it receive an argument which is scrollPercentX
function updateXcb(scrollPercentX) {
  // ...do something
}

// effection same as the function above
function updateYcb(scrollPercentY) {
  // ...do something
}

</script>

// template.vue

<template>
  // can access scrollLeft/scrollTop/scrollbarVisibility by reactive value
  <easier-scroll :scrollPercentX="X" :scrollPercentY="Y" :isHiddenScrollbar="hidden" @scrollX="updateXcb" @scrollY="updateYcb">
    <div> // require one root element, easier-scroll will deal with it as a scroll container
      <div> // only allow one root children for container
        ...
      </div>
    </div>
  </easier-scroll>

  <easier-scroll>
    <your-component></your-component> // you can also extract inner content as a component
  </easier-scroll>
</template>