How to realize Seamless Scroll effect with vue.js

This article mainly explains "how to achieve seamless scrolling effect in vue.js". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to achieve seamless scrolling effect with vue.js".

A simple seamless scrolling based on vue.js

: feet: online documentation demo: ear_of_rice: small demo: blue_book:English Document

Installation

NPM

Npm install vue-seamless-scroll-save

Use

ES6

Demo page example-src/App.vue for details

/ / * * main.js**import Vue from 'vue'import scroll from' vue-seamless-scroll'Vue.use (scroll) / / or you can set the globally registered component name by default vue-seamless-scrollVue.use (scroll, {componentName: 'scroll-seamless'})

General usage (introduced by script tag)

Example:

Demo page test/test.html for details

... New Vue ({el:'# app'})

Configuration item default

DefaultOption () {return {step: 1, / / the larger the number, the faster the scrolling speed limitMoveNum: 5, / / the amount of data to start seamlessly scrolling / / this.dataList.length hoverStop: true, / / whether to enable mouse hover stop direction: 1, / / 0 up 1, 2 left 3 right openWatch: true, / / turn on data real-time monitoring and refresh dom singleHeight: 0 / / height at which single-step motion stops (default 0 is seamless non-stop rolling) direction = > 0tick 1 singleWidth: 0, / / width of single-step motion stop (default value 0 is seamless non-stop rolling) direction = > 2 step 3 waitTime: 1000 / / time for single-step motion to stop (default 1000ms)}} so far I believe you have a deeper understanding of "how to achieve seamless scrolling effect in vue.js". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!