龙空技术网

轻量级 Vue 平滑楼层直达组件Vue-scrollTo

web前端进阶 1265

前言:

如今看官们对“scroll组件”可能比较关切,兄弟们都需要知道一些“scroll组件”的相关资讯。那么小编在网络上收集了一些有关“scroll组件””的相关知识,希望朋友们能喜欢,小伙伴们一起来了解一下吧!

今天给大家推荐一款 vue.js 顺滑动画滚动到页面指定位置组件VueScrollTo。

vue-scrollto 一个定位滚动条滚动至当前元素位置组件。支持按 x轴 或 y轴 滚动,可以嵌套元素,当前元素在父元素中滚动。

安装

$ npm install --save vue-scrollto

引入插件

import Vue from 'vue'import VueScrollTo from 'vue-scrollto'Vue.use(VueScrollTo)// You can also pass in the default optionsVue.use(VueScrollTo, {  container: "body",  duration: 500,  easing: "ease",  offset: 0,  force: true,  cancelable: true,  onStart: false,  onDone: false,  onCancel: false,  x: false,  y: true})

使用

<a href="#" v-scroll-to="'#element'">Scroll to #element</a><div id="element">  Hi. I'm #element.</div><!--自定义参数配置--><a href="#" v-scroll-to="{  el: '#element',  container: '#container',  duration: 500,  easing: 'linear',  offset: -200,  force: true,  cancelable: true,  onStart: onStart,  onDone: onDone,  onCancel: onCancel,  x: false,  y: true}">  Scroll to #element</a>

最后附上文档及项目地址

# 文档地址 仓库地址

okay,就分享到这里,感谢你的阅读。如果对大家有帮助,记得多支持一下哈~~

标签: #scroll组件