vue-seamless-scroll
A simple, Seamless scrolling for Vue.js
🐾online demo | 🌾 sample demo | 📘 中文文档
Browser support
 IE |
 Firefox |
 Chrome |
 Safari |
 iOS |
 Android |
|---|---|---|---|---|---|
| IE9+ | ✓ | ✓ | ✓ | ✓ | ✓ |
Installation
NPM
npm install vue-seamless-scroll --saveUsage
ES6
Specific reference example-src/App.vue
// **main.js**
import Vue from 'vue'
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)
<template>
<vue-seamless-scroll></vue-seamless-scroll>
</template>
//or you can set componentName default componentName is vue-seamless-scroll
Vue.use(scroll,{componentName: 'scroll-seamless'})
<template>
<scroll-seamless></scroll-seamless>
</template>normal use (script tag)
Example:
Specific reference test/test.html
<html>
<head>
...
</head>
<body>
<div id="app">
<vue-seamless-scroll></vue-seamless-scroll>
</div>
<script src="vue.js"></script>
<script src="vue-seamless-scroll"></script>
<script>
new Vue({
el: '#app'
})
</script>
</body>
</html>Configure
defaultOption () {
return {
step: 1, //the faster the rolling speed is faster
limitMoveNum: 5, //start seamless scrolling minimum data //this.dataList.length
hoverStop: true, //mouse hover control is enabled
direction: 1, // 0 down || 1 up || 2 left || 3 right
openWatch: true, //open data realTime monitoring
singleHeight: 0, //one single stop height(default zero is seamless) => direction 0/1
singleWidth: 0, //one single stop width(default zero is seamless) => direction 2/3
waitTime: 1000 //one single data stop wait time
}
}Changelog
See the GitHub release history.
Cares
If you want js to scroll seamlessly (without dependencies) you can switch to here.seamscroll。
Contribution
Welcome to give some Suggestions and optimizations, and look forward to your Pull Request.
License
vue-seamless-scroll is open source and released under the MIT License.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent