scrollkit

a smooth scroll kit component for vue which has excellent performance (59-60fps) in browsers testing

Usage no npm install needed!

<script type="module">
  import scrollkit from 'https://cdn.skypack.dev/scrollkit';
</script>

README

Scrollkit

a smooth scroll kit component for vue which has excellent performance (59-60fps) in browsers testing

Installation

npm i scrollkit
  1. globally
import Scrollkit from 'scrollkit'

Vue.use(Scrollkit)
  1. partially
import { Scrollkit } from 'scrollkit'

<script>
components: {
  Scrollkit
}
</script>

Usage

    1. wrap your html or components directly
<scrollkit>
  // your html
</scrollkit>
    1. custom-built for your own

vertical scroll(default)

 <scrollkit direction="vertical" :scrollbar="false" :bounce="true" :observeScroll="true" :observeBeforeScroll="true" :observeScrollEnd="true" @scroll="" @beforeScrollStart="" @scrollEnd="">
  // your html      
</scrollkit>

horizontal scroll

 <scrollkit direction="horizontal" :scrollbar="false" :bounce="true" :observeScroll="true" :observeBeforeScroll="true" :observeScrollEnd="true" @scroll="" @beforeScrollStart="" @scrollEnd="">
  // your html      
</scrollkit>
    1. layout calculation
this.$refs.scrollkit.setNeedsLayout()

re-calculation layout does not needed since scrollkit provides the auto detective ability for dom mutation

Notice

your fixed component or dom element will not effects when wrapped in <scrollkit> cause of the dependency of the lib is base on transform. therefore, your should place all fixed elements out of the wrapper. you should set style with display: inline-block for wrapper of horizontal scroll component.