README
Scrollkit
a smooth scroll kit component for vue which has excellent performance (59-60fps) in browsers testing
Installation
npm i scrollkit
- globally
import Scrollkit from 'scrollkit'
Vue.use(Scrollkit)
- partially
import { Scrollkit } from 'scrollkit'
<script>
components: {
Scrollkit
}
</script>
Usage
- wrap your html or components directly
<scrollkit>
// your html
</scrollkit>
- 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>
- 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 ontransform
. therefore, your should place allfixed
elements out of the wrapper. you should set style withdisplay: inline-block
for wrapper of horizontal scroll component.