vuescroll滚动条长度修改（小巧Vue页面滚动进度条组件ScrollProgress）
vuescroll滚动条长度修改（小巧Vue页面滚动进度条组件ScrollProgress）# 预览地址 https://spemer.github.io/vue-scroll-progress/ # 仓库地址 https://github.com/spemer/vue-scroll-progressok，今天就分享到这里。希望能喜欢~~[加油]
今天给大家分享一个轻量级Vue.js全屏滚动进度条组件VueScrollProgress。
vue-scroll-progress 一款基于vue.js构建的页面滚动进度条组件，非常小巧，GZIP压缩后不到1KB。
$ npm i vue-scroll-progress -S
也支持通过CDN引入使用。
<script src="https://cdn.jsdelivr.net/npm/vue-scroll-progress/"></script>
<script src="https://unpkg.com/vue-scroll-progress/"></script>
<script src="https://bundle.run/vue-scroll-progress"></script>
// 在main.js中引入
import Vue from 'vue';
import VueScrollProgress from 'vue-scroll-progress';
Vue.use(VueScrollProgress);快速使用
<template>
<div id="app">
<VueScrollProgress></VueScrollProgress>
</div>
</template>
<!-- 自定义进度条样式 -->
<style>
/* play with some lines below */
#progress-container-el {
/* background */
background-color: transparent !important;
top: calc(100% - 4px) !important;
}
#progress-el {
/* progress bar */
background-color: red !important;
}
</style>
大家如果用的到的话，也可以去看一看。
# 预览地址
https://spemer.github.io/vue-scroll-progress/
# 仓库地址
https://github.com/spemer/vue-scroll-progress
ok，今天就分享到这里。希望能喜欢~~[加油]
