vue-seamless-scroll
A simple seamless scroll based vue.js
🐾 Online Document Demo 🌾 small Demo 📘 English Document
The installation
NPM
npm install vue-seamless-scroll --save
Copy the codeuse
ES6
Example – SRC/app.vue for details
// **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 the global registered component name yourself. The default registered component name is vue-seamless-scroll
Vue.use(scroll,{componentName: 'scroll-seamless'})
<template>
<scroll-seamless></scroll-seamless>
</template>
Copy the codeCommon usage (script tag introduced)
Example:
Demo page test/test.html for details
<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>
Copy the codeDefault value of the configuration item
defaultOption () {
return {
step: 1.// The higher the value, the faster the scroll
limitMoveNum: 5.// The amount of data to start seamless scrolling // this.datalist. Length
hoverStop: true.// Whether to enable mouse hover stop
direction: 1.// 0 down 1 up 2 left 3 right
openWatch: true.// Enable real-time data monitoring and refresh dom
singleHeight: 0.// The stopping height of a single step (default 0 is seamless non-stop scrolling) direction => 0/1
singleWidth: 0.// The width of the single step stop (default 0 is seamless non-stop scrolling) direction => 2/3
waitTime: 1000 // Stop time for single step (default 1000ms)}}Copy the codeVersion history
See the GitHub historical version.
Pay attention to
If you want js to scroll seamlessly (without dependencies) you can go to seamscroll here.
License
vue-simple-spinner is open source and released under the MIT License.
TKS
Vue-seamless – Scroll if you find a bug or something that’s not working, just star it.