guillaumebriday / vue-scroll-progress-bar Goto Github PK

View Code? Open in Web Editor NEW

85.0 2.0 6.0 753 KB

Vue.js plugin for page scroll progress bar

Home Page: https://vue-scroll-progress-bar.netlify.com/

License: MIT License

JavaScript 53.43% Vue 46.57%

vue scrollbar progress-bar npm-package vuejs2 vue-plugin vuecli3 scroll-events

vue-scroll-progress-bar's Introduction

vue-scroll-progress-bar

Getting started

Install

$ npm install @guillaumebriday/vue-scroll-progress-bar --save

$ yarn add @guillaumebriday/vue-scroll-progress-bar

Install the plugin into Vue:

import Vue from 'vue'
import VueScrollProgressBar from '@guillaumebriday/vue-scroll-progress-bar'

Vue.use(VueScrollProgressBar)

Or use the component directly:

import { VueScrollProgressBar } from '@guillaumebriday/vue-scroll-progress-bar'

export default {
  components: {
    VueScrollProgressBar
  },

  // ...
}

Basic Usage

<template>
  <vue-scroll-progress-bar @complete="handleComplete" height="2rem" />
</template>

Props

key	description	default
`height`	Height of the progress bar	`'.5rem'`
`backgroundColor`	Background property of the progress bar	`'linear-gradient(to right, #38C172, #51D88A)'`
`barClass`	Class attribute of the progress bar	`'{}'`
`containerColor`	Background property of the progress bar container	`'transparent'`
`zIndex`	z-index property of the progress bar container	`'50'`
`containerClass`	Class attribute of the progress bar container	`'{"progress-bar-container--container": true}'`

With :

.progress-bar-container--container {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
}

containerClass must be used to override the .progress-bar-container--container default class. You can use the default :class syntax on the component to add classes if needed.

Events

key	description
`begin`	When scroll reached 0%
`complete`	When scroll reached 100%

Develop

Project setup

$ yarn install
$ yarn build

Open example app

$ cd example
$ yarn
$ yarn serve

Lint files

$ yarn lint

Contributing

Do not hesitate to contribute to the project by adapting or adding features ! Bug reports or pull requests are welcome.

License

This project is released under the MIT license.

vue-scroll-progress-bar's People

Contributors

Stargazers

Watchers

Forkers

vue-scroll-progress-bar's Issues

Failed to mount component: template or render function not defined.

new functionality - DOM selector handler

Hello,
I really like your plugin, however I would like to ask you to add new functionality.
Could you add the option of adding a handler on a given DOM element? I would like to use your plugin on the blog, and the scrollbar position to refer to the article text, but when the page has article, sidebar and footer then the scrollbar measures the entire page, not what the user is interested in - the length of the article. For e.g.

<vue-scroll-progress-bar handler=".post-article" @complete="handleComplete" height="2rem" />

I think this is a nice option.
Hold on!

Add Debounce?

I'm just wondering. Why don't you use debounce for scrolling? It's just too much if you are firing the calculation for each small scrolling?

Here is one video as an example: https://scotch.io/courses/getting-started-with-javascript-for-web-development/scroll-progress

not work backgroundColor prop

I set the backgroundColor property. But it is not work !!!

Allow custom vertical offset of progress bar

In certain situations, there may be a large header or other element that you would want to exclude from the height calculation. I'd like to be able to pass a reference to an element and have the progress bar calculate it's width and only become visible after that referenced element is outside of the viewport.

Will submit a PR for this soon.

Improve performance with passive

Another thing that I notice. You could use { passive: true } for the addEventListener for scroll.
This improves performance!

Here for example https://stackoverflow.com/questions/37721782/what-are-passive-event-listeners

Here is the code if the browser supports passive:

let supportsPassive = false;
try {
    const opts = Object.defineProperty({}, 'passive', {
        // eslint-disable-next-line
        get() {
            supportsPassive = true;
        },
    });

    window.addEventListener('testPassive', null, opts);
    window.removeEventListener('testPassive', null, opts);
} catch (e) {
    // nothing
}

and then for example:

window.addEventListener('scroll', _.debounce(this.calculatesomething, 50), supportsPassive ? { passive: true } : false);

ie 11 problem

Component not rendering correctly on production build

Hi Gaillaume,

Thank you for your plugin. It's working great on my Nuxt 2 website in development mode, but I am encountering difficulties in production mode. I've just added a question on Stackoverflow, since I am not entirely sure if the problem lies in my Nuxt installation or the package itself.

https://stackoverflow.com/questions/77805521/component-output-renders-incorrectly-after-running-nuxt-production-build

I am at a loss here, hoping you can point me to the right direction for a solution. I can share the production URL with you if you like.

Use Rollup

[Vue warn]: Property or method "handleComplete" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

Hello,
I start in vue.js
I do not understand everything yet :-(
I installed your plugin and I have this error.
I don't understand where this error comes from.
Can you help me ?
Thank you