Vue.js wrapper for perfect scrollbar

Overview

vue2-perfect-scrollbar

Vue.js minimalistic but powerful wrapper for perfect scrollbar

Are you looking compatible version with Vue3 ? check https://github.com/mercs600/vue3-perfect-scrollbar

Why I Created it ?

Because I ❤️ to use perfect-scrollbar in my projects ( 🙌 utatti). But also because the current solutions on github are outdated or overcomplicated.

Why would you use it ?

Because you want to load perfect-scrollbar to your Vue project in an easy way. But also because this plugin is updated, tested and build by rollup. So you will not find any unnecessary 💩 code in this repo. I hope 🙏 .

If you have any reasonable PR you are welcome 🤘

Install

npm

npm install vue2-perfect-scrollbar

yarn

yarn add vue2-perfect-scrollbar

How to use

Global Registration

import PerfectScrollbar from 'vue2-perfect-scrollbar'
import 'vue2-perfect-scrollbar/dist/vue2-perfect-scrollbar.css'

Vue.use(PerfectScrollbar)

So then you can use this plugin in each component as

<perfect-scrollbar>
    <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</perfect-scrollbar>

This plugin will generate a container with ".ps" class name, you need to customize the height of the container

/* example */
.ps {
  height: 400px;
}

Edit Vue Template

Global options

Install method takes additional parameters:

name {String}

Name of your global component.

Default: PerfectScrollbar

tag {String}

Tag which will be render as perfect scrollbar container

Default: div

watchOptions {Boolean}

Set true if you want to update perfect-scrollbar on options change

Default: false

options {Object}: Options

perfect-scrollbar options.

Default: {}

Local Registration

<template>
    <div>
        <perfect-scrollbar>
            <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
        </perfect-scrollbar>
    </div>
</template>
<script>
import { PerfectScrollbar } from 'vue2-perfect-scrollbar'
export default {
    components: {
        PerfectScrollbar
    }
}
</script>
<style src="vue2-perfect-scrollbar/dist/vue2-perfect-scrollbar.css"/>

Edit Vue Template

Props

tag {String}

Tag which will be render as perfect scrollbar container

Default: div

watchOptions {Boolean}

Set true if you want to update perfect-scrollbar on options change

Default: false

options {Object}: Options

perfect-scrollbar options.

Events

You can use Vue.js way to listen on the all perfect-scrollbar events. List of events you can find here

Simple example:

<template>
  <div id="app">
    <perfect-scrollbar @ps-scroll-y="onScroll" ref="scrollbar">
      <div>your content here</div>
    </perfect-scrollbar>
  </div>
</template>

<script>
export default {
  methods: {
    onScroll(event) {
      console.log(this.$refs.scrollbar.ps, event);
    }
  }
};
</script>

Edit Vue Perfect Scrollbar Event Listening

DEMO

https://mercs600.github.io/vue2-perfect-scrollbar/. You can also fork example from codesandbox

Cookbook

Custom scrollbar behavior with router.

One of simple solution to setup custom scrollbar to top when your route is changed.

  1. Add perfect scrollbar as wrapper for router-view and add simple ref
<perfect-scrollbar ref="scroll">
  <router-view></router-view>
</perfect-scrollbar>
  1. Add watch on $route to setup scroll container to 0, when route is changed.
watch: {
  $route() {
    this.$refs.scroll.$el.scrollTop = 0;
  }
}

Edit vue2-perfect-scrollbar with router

Issues
  • Scroll on the x axis keeps showing up!

    Scroll on the x axis keeps showing up!

    I want to suppress the left-to-right scroll but I guess I have trouble implementing the suppressing it. The demo does not give much info on how to use options inside the component either. Could you make it simpler and display the use of options inside the component?

    opened by mehmeteyupoglu 10
  • Potential update issues (`updated` hook, `$nextTick`)

    Potential update issues (`updated` hook, `$nextTick`)

    Shouldn't it call ps.update() on the next tick after the updated hook has been called? See what Vue docs say: https://vuejs.org/v2/api/#updated, (page source code)

    enhancement 
    opened by WofWca 8
  • Installation 1.2.4 stuck on Windows

    Installation 1.2.4 stuck on Windows

    Im running Yarn 1.19.2 with Windows 10 and I'm unable to upgrade from 1.2.3 to 1.2.4. The installation is stuck at:

    verbose 1.439315201 Performing "GET" request to "https://registry.yarnpkg.com/vue2-perfect-scrollbar/-/vue2-perfect-scrollbar-1.2.4.tgz".

    I'm able to install the package on Alpine with Yarn. I'm able to install the package with NPM on Windows. I already did a yarn cache clear and removed the node_modules folder.

    When comparing the two releases, I noticed the 1.2.4 release .tgz file includes a file which is just a /, could that be the issue?

    image

    opened by darthf1 7
  • Vue 3 Support

    Vue 3 Support

    Do this package support Vue 3? As Vue 3 has RC It will be a good idea to add support for Vue 3.

    Regards.

    opened by jd-0001 6
  • .ps class gets removed by dynamic v-bind:class

    .ps class gets removed by dynamic v-bind:class

    Versions

    vue2-perfect-scrollbar: ^1.2.1 vue: ^2.6.8

    Description

    The default .ps class that is initialized by perfect-scrollbar gets removed when I dynamically set other classes.

    Example vue code:

    <perfect-scrollbar
        :class="{
            largeScreen: isLargeScreen,
            defaultScreen: isDefaultScreen
        }"
    >
        <slot />
    </perfect-scrollbar>
    

    Example compiled code (initial):

    <div class="ps defaultScreen">
      <div class="ps__rail-x" style="left: 0px; bottom: 0px;">
        <div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div>
      </div>
      <div class="ps__rail-y" style="top: 0px; right: 0px;">
        <div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 0px;"></div>
      </div>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
        the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of
        type and scrambled it to make a type specimen book. It has survived not only five centuries, but
        also the leap into electronic typesetting, remaining essentially unchanged. It was popularised
        in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
        recently with desktop publishing software like Aldus PageMaker including versions of Lorem
        Ipsum.
      </p>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
        the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of
        type and scrambled it to make a type specimen book. It has survived not only five centuries, but
        also the leap into electronic typesetting, remaining essentially unchanged. It was popularised
        in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
        recently with desktop publishing software like Aldus PageMaker including versions of Lorem
        Ipsum.
      </p>
    </div>
    

    Example compiled code (after a change triggers .largeScreen class to be added): *notice .ps gets removed

    <div class="largeScreen">
      <div class="ps__rail-x" style="left: 0px; bottom: 0px;">
        <div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div>
      </div>
      <div class="ps__rail-y" style="top: 0px; right: 0px;">
        <div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 0px;"></div>
      </div>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
        the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of
        type and scrambled it to make a type specimen book. It has survived not only five centuries, but
        also the leap into electronic typesetting, remaining essentially unchanged. It was popularised
        in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
        recently with desktop publishing software like Aldus PageMaker including versions of Lorem
        Ipsum.
      </p>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
        the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of
        type and scrambled it to make a type specimen book. It has survived not only five centuries, but
        also the leap into electronic typesetting, remaining essentially unchanged. It was popularised
        in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
        recently with desktop publishing software like Aldus PageMaker including versions of Lorem
        Ipsum.
      </p>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
        the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of
        type and scrambled it to make a type specimen book. It has survived not only five centuries, but
        also the leap into electronic typesetting, remaining essentially unchanged. It was popularised
        in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
        recently with desktop publishing software like Aldus PageMaker including versions of Lorem
        Ipsum.
      </p>
    </div>
    

    My hunch is that it has something to do with the actual v-bind:class from vue. This can be fixed in the mean time by ensuring .ps is always a static class on the root element of <perfect-scrollbar />.

    opened by donaldma 5
  • Bug: Cannot read property 'scrollTop' of null in

    Bug: Cannot read property 'scrollTop' of null in "updateGeometry", on some mobile devices

    I haven't been able to reproduce this error myself but this error got trigged in our Sentry :

    Cannot read property 'scrollTop' of null

    This seems to be occuring in this function at the third line:

    var updateGeometry = function(i) {
    var element = i.element;
    var roundedScrollTop = Math.floor(element.scrollTop);
    i.containerWidth = element.clientWidth;
    i.containerHeight = element.clientHeight;
    i.contentWidth = element.scrollWidth;
    i.contentHeight = element.scrollHeight;
    

    It occurs on both IOS and Android, on chrome, firefox, safari but not consistently.

    Let me know if you want some more details

    opened by LucasGenoud 5
  • Changing :options during run-time, are not applied with update()

    Changing :options during run-time, are not applied with update()

    I have created a codesanbox, with the full code of the described particular issue below: https://codesandbox.io/s/vqm9rn4ry7.

    What I'm expecting here is: to toggle the wheelPropagation with a click on the button, and scrolling in the provided "container" where the perfect-scrollbar is applied, to "propagate / not propagate" the scrolling on the main screen. depending of the value for variable: wheelPropagation.

    Code is in the components/ScrollbarTest.vue and from there you can see that in the <perfect-scrollbar> component I'm dynamically passing the :options:

        <perfect-scrollbar
          :options="{ wheelPropagation: wheelPropagation }"
          ref="scroll"
          class="container"
        >
    

    where the second wheelPropagation is a variable in my component:

      data() {
        return {
          wheelPropagation: false,
          ...
        };
      },
    

    changing this value with a click on a button - inside the method:

        toggleWheelPropagation() {
          let self = this;
          //setTimeout(() => {
          //self.$nextTick(() => {
            self.wheelPropagation = !self.wheelPropagation;
            self.refs["scroll"].update();
          //});
          //}, 0);
        }
    

    Is actually not applying the new values in the passed :options property. I also tried using the setTimeout() and $nextTick() methods, but also was not working.

    So I'm wondering: am I doing something wrong here, or maybe this is actually not supported?

    opened by ivan-stojanov 5
  • Adding Passive event listener options

    Adding Passive event listener options

    Setting Passive Event Listener options to false, because Chrome, in the newest versions, sets events as Passive. This means, that e.preventDefault() cannot be used and that throws an error in the console, and, when scrolling the container, scrolls the entire page.

    opened by EmilsM 5
  • Scrollbar don't show up on hover, but works and show up when scrolling?

    Scrollbar don't show up on hover, but works and show up when scrolling?

    I have pretty much the same issue which is described here, but the described solutions there are for plane jQuery and for Angular. Here is the problem: the div where the perfect scrollbar is applied, is hidden by default and then when I'm opening it, initially the scrollbar is hidden (it's not visible when I hover over the div) and once I start scrolling, it is appearing and everything works fine from that moment. Based on the ideas in the link above, I tried to implement something as:

    In the main.js I'm using the global registration:

    import PerfectScrollbar from 'vue2-perfect-scrollbar'
    import 'vue2-perfect-scrollbar/dist/vue2-perfect-scrollbar.css'
    
    Vue.use(PerfectScrollbar, { options: { wheelPropagation: true }})
    

    And then in my component I'm having the usage in the HTML like (the ID for my <div> is created dynamically and this piece of HTML is in a hidden <div> when the page loads):

    ... some HTML content ...
    <ul>
       <perfect-scrollbar :id="'some-dynamic-id-' + thisIsVariableID">
          <li v-for="(vale, index) in list" :key="index">
             ... some HTML content ...
          </li>
       </perfect-scrollbar >
    </ul>
    ... some HTML content ...
    

    I tried adding the following code in all of the hooks created(), beforeMount() and mounted() but it was not working (also tried the same without the setInterval() function):

    let selfComponent = this;
    setTimeout(() => {
       let ps = document.getElementById('some-dynamic-id-' + selfComponent.thisIsVariableID);
       ps.perfectScrollbar('update');
    }, 0);
    

    So if there is any idea how to make this working in my VueJS project please let me know.

    opened by ivan-stojanov 5
  • ps-y-reach-end event triggers before going to another page

    ps-y-reach-end event triggers before going to another page

    I use this event for infinity scroll. But When you go to another page, the event triggers one more time. I can’t figure out how to avoid this.

    opened by zaharr2 4
  • Bump color-string from 1.5.3 to 1.6.0

    Bump color-string from 1.5.3 to 1.6.0

    Bumps color-string from 1.5.3 to 1.6.0.

    Release notes

    Sourced from color-string's releases.

    1.6.0

    Minor release 1.6.0

    • #55 - Add support for space-separated HSL

    Thanks @​htunnicliff for the contribution :)

    1.5.5 (Patch/Security Release) - hwb() ReDos patch (low-severity)

    Release notes copied verbatim from the commit message, which can be found here: 0789e21284c33d89ebc4ab4ca6f759b9375ac9d3

    Discovered by Yeting Li, c/o Colin Ife via Snyk.io.
    

    A ReDos (Regular Expression Denial of Service) vulnerability was responsibly disclosed to me via email by Colin on Mar 5 2021 regarding an exponential time complexity for linearly increasing input lengths for hwb() color strings.

    Strings reaching more than 5000 characters would see several milliseconds of processing time; strings reaching more than 50,000 characters began seeing 1500ms (1.5s) of processing time.

    The cause was due to a the regular expression that parses hwb() strings - specifically, the hue value - where the integer portion of the hue value used a 0-or-more quantifier shortly thereafter followed by a 1-or-more quantifier.

    This caused excessive backtracking and a cartesian scan, resulting in exponential time complexity given a linear increase in input length.

    Thank you Yeting Li and Colin Ife for bringing this to my attention in a secure, responsible and professional manner.

    A CVE will not be assigned for this vulnerability.

    1.5.4 (Patch Release)

    • Removes rounding of alpha values in RGBA hex (#rrggbbaa) and condensed-hex (#rgba) parsers, which caused certain unique inputs to result in identical outputs (see https://github.com/qix-/color/issues/174).
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump url-parse from 1.4.3 to 1.5.3

    Bump url-parse from 1.4.3 to 1.5.3

    Bumps url-parse from 1.4.3 to 1.5.3.

    Commits
    • ad44493 [dist] 1.5.3
    • c798461 [fix] Fix host parsing for file URLs (#210)
    • 201034b [dist] 1.5.2
    • 2d9ac2c [fix] Sanitize only special URLs (#209)
    • fb128af [fix] Use 'null' as origin for non special URLs
    • fed6d9e [fix] Add a leading slash only if the URL is special
    • 94872e7 [fix] Do not incorrectly set the slashes property to true
    • 81ab967 [fix] Ignore slashes after the protocol for special URLs
    • ee22050 [ci] Use GitHub Actions
    • d2979b5 [fix] Special case the file: protocol (#204)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump path-parse from 1.0.6 to 1.0.7

    Bump path-parse from 1.0.6 to 1.0.7

    Bumps path-parse from 1.0.6 to 1.0.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump tar from 2.2.1 to 2.2.2

    Bump tar from 2.2.1 to 2.2.2

    Bumps tar from 2.2.1 to 2.2.2.

    Commits
    • 523c5c7 2.2.2
    • 7ecef07 Bump fstream to fix hardlink overwriting vulnerability
    • 9fc84b9 Use {} for hardlink tracking instead of []
    • 15e59f1 Only track previously seen hardlinks
    • 4f85851 Ignore potentially unsafe files
    • See full diff in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump dns-packet from 1.3.1 to 1.3.4

    Bump dns-packet from 1.3.1 to 1.3.4

    Bumps dns-packet from 1.3.1 to 1.3.4.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump browserslist from 4.1.1 to 4.16.6

    Bump browserslist from 4.1.1 to 4.16.6

    Bumps browserslist from 4.1.1 to 4.16.6.

    Changelog

    Sourced from browserslist's changelog.

    4.16.6

    • Fixed npm-shrinkwrap.json support in --update-db (by Geoff Newman).

    4.16.5

    • Fixed unsafe RegExp (by Yeting Li).

    4.16.4

    • Fixed unsafe RegExp.
    • Added artifactory support to --update-db (by Ittai Baratz).

    4.16.3

    • Fixed --update-db.

    4.16.2

    4.16.1

    • Fixed Chrome 4 with mobileToDesktop (by Aron Woost).

    4.16

    • Add browserslist config query.

    4.15

    • Add TypeScript types (by Dmitry Semigradsky).

    4.14.7

    • Fixed Yarn Workspaces support to --update-db (by Fausto Núñez Alberro).
    • Added browser changes to --update-db (by @​AleksandrSl).
    • Added color output to --update-db.
    • Updated package.funding to have link to our Open Collective.

    4.14.6

    • Fixed Yarn support in --update-db (by Ivan Storck).
    • Fixed npm 7 support in --update-db.

    4.14.5

    • Fixed last 2 electron versions query (by Sergey Melyukov).

    4.14.4

    • Fixed Unknown version 59 of op_mob error.

    4.14.3

    • Update Firefox ESR.

    4.14.2

    • Fixed --update-db on Windows (by James Ross).
    • Improved --update-db output.

    4.14.1

    • Added --update-db explanation (by Justin Zelinsky).

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump hosted-git-info from 2.7.1 to 2.8.9

    Bump hosted-git-info from 2.7.1 to 2.8.9

    Bumps hosted-git-info from 2.7.1 to 2.8.9.

    Changelog

    Sourced from hosted-git-info's changelog.

    2.8.9 (2021-04-07)

    Bug Fixes

    2.8.8 (2020-02-29)

    Bug Fixes

    • #61 & #65 addressing issues w/ url.URL implmentation which regressed node 6 support (5038b18), closes #66

    2.8.7 (2020-02-26)

    Bug Fixes

    • Do not attempt to use url.URL when unavailable (2d0bb66), closes #61 #62
    • Do not pass scp-style URLs to the WhatWG url.URL (f2cdfcf), closes #60

    2.8.6 (2020-02-25)

    2.8.5 (2019-10-07)

    Bug Fixes

    • updated pathmatch for gitlab (e8325b5), closes #51
    • updated pathmatch for gitlab (ffe056f)

    2.8.4 (2019-08-12)

    ... (truncated)

    Commits
    • 8d4b369 chore(release): 2.8.9
    • 29adfe5 fix: backport regex fix from #76
    • afeaefd chore(release): 2.8.8
    • 5038b18 fix: #61 & #65 addressing issues w/ url.URL implmentation which regressed nod...
    • 7440afa chore(release): 2.8.7
    • 2d0bb66 fix: Do not attempt to use url.URL when unavailable
    • f2cdfcf fix: Do not pass scp-style URLs to the WhatWG url.URL
    • e1b83df chore(release): 2.8.6
    • ff259a6 Ensure passwords in hosted Git URLs are correctly escaped
    • 624fd6f chore(release): 2.8.5
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by nlf, a new releaser for hosted-git-info since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump lodash from 4.17.10 to 4.17.21

    Bump lodash from 4.17.10 to 4.17.21

    Bumps lodash from 4.17.10 to 4.17.21.

    Commits
    • f299b52 Bump to v4.17.21
    • c4847eb Improve performance of toNumber, trim and trimEnd on large input strings
    • 3469357 Prevent command injection through _.template's variable option
    • ded9bc6 Bump to v4.17.20.
    • 63150ef Documentation fixes.
    • 00f0f62 test.js: Remove trailing comma.
    • 846e434 Temporarily use a custom fork of lodash-cli.
    • 5d046f3 Re-enable Travis tests on 4.17 branch.
    • aa816b3 Remove /npm-package.
    • d7fbc52 Bump to v4.17.19
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by bnjmnt4n, a new releaser for lodash since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump y18n from 3.2.1 to 3.2.2

    Bump y18n from 3.2.1 to 3.2.2

    Bumps y18n from 3.2.1 to 3.2.2.

    Commits
    Maintainer changes

    This version was pushed to npm by oss-bot, a new releaser for y18n since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump elliptic from 6.4.1 to 6.5.4

    Bump elliptic from 6.4.1 to 6.5.4

    Bumps elliptic from 6.4.1 to 6.5.4.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Releases(1.5.2)
null 1 Oct 8, 2021
A vuejs scrollbar component for PC

vue-scrollbar-live pkg.module supported, which means that you can apply tree-shaking in you project 中文文档 A vue scrollbar component, support SSR. repos

志平 刘 11 Oct 12, 2021
a nice scrollbar for vue.js 2.0

vue-nice-scrollbar a nice scrollbar for vue.js 2.0 Demo DEMO Install npm install vue-nice-scrollbar --save Usage import Vue from 'vue' import vue

Burning 14 Jan 22, 2021
The Simplest Scroll Area Component with custom scrollbar for Vue Js. https://bosnaufal.github.io/vue-scrollbar/

Vue Scrollbar The Simplest Scroll Area Component with custom scrollbar for Vue Js. All animation, Height and Width are pure CSS, So it's TOTALLY CUSTO

Naufal Rabbani 116 Mar 23, 2021
Smooth scrollbar for Vue.js projects

Vue Smooth Scrollbar Smooth Scrollbar for Vue.js projects. Based on @idiotwu's smooth-scrollbar. Usage 1. Install dependency npm install --save vue-sm

Magisters 31 Aug 12, 2021
A vue component of scrollbar

vue-scrollbar-simple Introduction vue-scrollbar-simple is a vue component of scrollbar Install $ npm install vue-scrollbar-simple --save Usage impo

Zhi Xiong 3 Oct 1, 2021
Handy floating scrollbar component for Vue 3

vue-handy-scroll Handy floating scrollbar component for Vue 3. Synopsis vue-handy-scroll is a component that solves the problem of scrolling lengthy c

null 6 Oct 2, 2021
Vue directive wrapper for smooth-scrollbar

smooth-vuebar Vue directive wrapper for smooth-scrollbar Demo You can refer to the wrapped library's demo. Why There are many other wrappers for this

Marco 'Gatto' Boffo 25 Aug 16, 2021
A customizable scrollbar plugin based on vue.js for PC , mobile phone, touch screen, laptop.

Vuescroll Introduction Vuescroll is a scrollbar plugin based on Vue.js 2.X, it is very easy to use, no complex options and each option has its default

null 1.1k Oct 12, 2021
A customizable scrollbar plugin based on vue.js for PC , mobile phone, touch screen, laptop.

Vuescroll Introduction Vuescroll is a scrollbar plugin based on Vue.js 2.X, it is very easy to use, no complex options and each option has its default

null 1.1k Oct 19, 2021
The virtual responsive crossbrowser scrollbar component for VueJS 2x

VBar The virtual responsive crossbrowser scrollbar component for VueJS 2x DEMO Usage Install Using NPM npm i v-bar Using yarn yarn add v-bar In your .

Luigui Delyer 222 Oct 2, 2021
Lightweight package for highlighting menu items as you scroll the page, also scrolling to target section when item clicked. Use as a vue component/directive or in vanilla js.

navscroll-js Installation This package is available on npm. Using npm: npm install --save navscroll Using yarn: yarn add navscroll Directly include it

Honoré Nintunze 52 Aug 12, 2021
(🗃️ Archived) Vue 2 directive for custom scrollbar that uses native scroll behavior. Lightweight, performant, customizable and without dependencies. Used successfully in production on https://ggather.com

??️ Archived & No Longer Maintained I've decided to archive this library because my priorities changed a bit and I no longer have enough resources (ti

null 659 Sep 13, 2021
⚡️ Blazing fast scrolling for any amount of data

vue-virtual-scroller Blazing fast scrolling of any amount of data | Live demo | Video demo For Vue 3 support, see here ??️ Become a Sponsor Sponsors T

Guillaume Chau 6.1k Oct 13, 2021
Vue.js plugin for page scroll progress bar

vue-scroll-progress-bar Getting started Install $ npm install @guillaumebriday/vue-scroll-progress-bar --save or $ yarn add @guillaumebriday/vue-scrol

Guillaume Briday 81 Oct 12, 2021
Vue.js plugin for page scroll progress bar

vue-scroll-progress-bar Getting started Install $ npm install @guillaumebriday/vue-scroll-progress-bar --save or $ yarn add @guillaumebriday/vue-scrol

Guillaume Briday 81 Oct 12, 2021
Wrapper to use the awesome scrollMonitor with [email protected]

VueScrollmonitor Handle scroll events like a boss Wrapper to use the awesome scrollMonitor with [email protected] To know more : https://github.com/stutrek/sc

Alexandre Bonaventure Geissmann 44 May 7, 2021
nuxt-fullpage is a nuxt module for creating fullscreen page scroll fast and simple.

Nuxt fullpage Nuxt module for creating fullscreen page scroll fast and simple. Demo online Table of contents Installation Usage Options Contributing I

Open Source Afghanistan 9 Oct 6, 2021
📜 Vue.js + Stroll.js. Awesome CSS list scroll effects for Vue2.x.

vue-stroll Vue.js + Stroll.js. Awesome CSS list scroll effects for Vue2.x. See Demo Installation npm i vue-stroll -S CDN Use this URL for development

Yunwei Xiao 154 Sep 8, 2021