📜 vue-native-scroller
Vue.js wrapper component over browser scroll API.
🌈 The main purpose of the library is just to give you a simple wrapper over browser native scroll API.
The library internally uses scroll
method.
✨ Features
- lightweight (~
2.5kb
gzip); - zero dependency;
- simple API;
Demo
💿 Installation
📦 Via NPM
npm install vue-native-scroller --save
🧶 Via Yarn
yarn add vue-native-scroller
Initialization
As a plugin
It must be called before new Vue()
.
Vue
As a global component
Vue
As a local component
name: 'YourAwesomeComponent' components: VueNativeScroller
🚀 Usage
Template
Just wrap your items into the <vue-native-scroller>
component:
foo bar baz
🎨 Styles
Then don't forget to include core styles:
SASS
:
;
Or already compiled CSS
:
CSS
:
;
Library is shipped with default theme, so if you want to import it, then do the following:
;
API
⚙️ Props
<vue-native-scroller>
accepts some props
through which you can customize different aspects of scroll logic.
Prop | Default | Description |
---|---|---|
behavior |
'smooth' |
Specifies scroll behavior. Possible values are: ['smooth', 'instant', 'auto'] |
align |
'center' |
Specifies alignment of the item relatively to the parent. Possible values are: ['left', 'center', 'right'] |
scrollbar |
false |
Specifies whether or not the scrollbar is visible |
tag |
'div' |
Specifies the tag of the container |
props
passing
Example of
🎛 Methods
<vue-native-scroller>
provides you with several methods you can use to scroll left, right or to certain item.
ℹ️
options
object in the bellow methods, is the object through which you can specify custom behavior and alignment of the scroll action. It can contain 2 properties with keysalign
andbehavior
.align
value should be one of the following values['left', 'center', 'right']
, andbehavior
:['smooth', 'instant', 'auto']
. If one of the keys is not specified, value passed by props is used (if value is not passed, default value is used).
Method | Description |
---|---|
scrollToIndex(index: number, options?: object) |
Scrolls to the item with specified index |
scrollLeft(options?: object) |
Scrolls left |
scrollRight(options?: object) |
Scrolls right |
methods
usage
Example of
// ... // ... name: 'YourAwesomeComponent' methods: { const scroller = this$refs scroller scroller scroller } // ...// ...
🕳️ Slots
<vue-native-scroller>
provides you with some scopedSlots
you can use to fit your needs.
Slot | Scope | Description |
---|---|---|
prepend |
{ scrollLeft } |
Slot that is prepended to the list of items |
append |
{ scrollRight } |
Slot that is appended to the list of items |
scopedSlots
Example of possible usage of Scroll left foo bar baz Scroll right
💉 Tests
Unit
Jest
and VueTestUtils
is used for unit tests.
You can run unit tests by running next command:
npm run test:unit
Powered by
Rollup
(and plugins);SASS
andnode-sass
;PostCSS
;Autoprefixer
;VueTestUtils
;Jest
.