mercs600/vue2-perfect-scrollbar

Vue.js wrapper for perfect scrollbar

🚧 Repository outdated

This project (vue2-perfect-scrollbar) is no longer actively developed or maintained. If you are seeking a version compatible with Vue 3, you can find it here: https://github.com/mercs600/vue3-perfect-scrollbar.

For any issues or bugs related to the core functionality of the Perfect Scrollbar library itself, please report them directly to the original author at https://perfectscrollbar.com/.

We appreciate your understanding and thank you for your support of this project.

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;
}

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"/>

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>

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>

2. Add watch on $route to setup scroll container to 0, when route is changed.

watch: {
  $route() {
    this.$refs.scroll.$el.scrollTop = 0;
  }
}

vue2-perfect-scrollbar's Issues

this.$emit integration

hi,

you can integrate this.$emit for events, it's boring to window.addEventListener :)

ty

How to integrate into a sidebar nav/menu?

Hello,

I quite seldom ask questions as I, for some reason, enjoy the pain to figure out things myself.

This one tough is not solvable for me, even after wasted hours. I finally use a css solution now but I'd still like to understand where I am heading wrong or what's going on ?

What I tried to achieve:

So I came across this tutorial here (Nr.2):

• https://bootstrapious.com/p/bootstrap-sidebar
• https://bootstrapious.com/tutorial/sidebar/index2.html

The guy there mentions he used perfect scrollbar (he used a jquery plugin). So I am more a vue guy and then I found your (great!) package. All good. Easy to install and to integrate.

Then, the strangeness started to begin.

• Sometimes the scrollbar is on the left or on the right side, I cannot tell if there is any relation or not.
• Also the sidebar is hidden by default on responsive devices. After I integrated perfect scrollbar, you can see the navbar bouncing/dancing when you first load the page.

What I tried:

• I tried to use perfect scrollbar directly, without success. I ended up in the nightmare that the scrollbar would not be there if the scrollbar is hidden initially (it is still in the DOM tough), I think that's expected behavior and needs to be solved by the update function
• Also I tried to only init the scrollbar if the sidebar is toggled, it was a mess
• I tried a pure JS approach, even excluding Vue, same story

For your convenience, I also setup a repo https://github.com/rezaffm/scrollbar-sidenav
It's a laravel project, so you can run it by composer install, npm install, npm run watch (or dev).

I'd highly appreciate to understand or see a solution that would get this plugin integrated with vue for a sidebar navigation (just as the guy has done it with jquery).

I was quite negatively surprised that this would be such a huge issue, should have maybe asked a bit earlier for some help.

No space between content and scrollbars

Is there any way to add some space between the content and the scrollbars? I don't want the scrollbars to overlap my content.

Remove `watchOptions` prop

And just always watch options instead.

1. The API is unintuitive, and unnecessary. Users can just create a non-reactive options object by themselves.
2. This prop also almost doubles the size of the package (if we don't count perfect-scrollbar itself

error in ./node_modules/vue2-perfect-scrollbar/dist/vue2-perfect-scrollbar.css

Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: Cannot find module 'postcss-import'

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.

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)

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

Scrollbars flash when I remove an item from list, which changes the div height

When there is no overflow, I see the scroll bars flash visible for a second when I edit a list height by deleting an item. Is there a way to avoid this?

Always Scroll to bottom

Hey,

I'm using this plugin like this:

<perfect-scrollbar id="content---window" class="scrollbar grey" :style="computeHeight">
                <content />
<perfect-scrollbar>

with following script:

export default {
    data () {
      return {
      }
    },
    mounted () {
       let objDiv = document.getElementById("content---window");
      objDiv.scrollTop = objDiv.scrollHeight;
      console.log(objDiv.scrollHeight) //Logs output: 723
    },
    computed: {
      computeHeight () {
        let height = '';

        if(this.$vuetify.breakpoint.smAndDown)
          height = 'calc(100vh  - 36px - 64px - 80px)';
        else
          height = 'calc(100vh  - 36px - 48px - 64px - 80px)';

        return {
          height: height
        };
      }
    }
}

Now, here's the problem, Although objDiv.scrollHeight is 723, I'm unable to scroll down to bottom of the div.

I've tried multiple answers on stackoverflow:
https://stackoverflow.com/questions/19418087/jquery-perfect-scroll-set-scrollbar-to-the-bottom-of-the-container
https://stackoverflow.com/questions/270612/scroll-to-bottom-of-div

None of them is working for the plugin. Can you help me with this?

How to listen to PS custom events

In the docs says you can listen to Perfect Scrollbar custom events and it refers to the PS documentation where it shows:

container.addEventListener('ps-scroll-x, ...)

In my app I'm trying this but with no success:

<scroll-bar ref="scroll"> ... </scroll-bar>

// error: addEventListener is not a function
mounted () {
    this.$refs.scroll.addEventListenter('ps-scroll-x', () => {
        consolellog(...)
    })
}

// error: nothing happens
mounted () {
    this.$refs.scroll.$el.addEventListenter('ps-scroll-x', () => {
        console.log(...)
    })
}

I am obviously missing something. How can I listen to the PS events?

Thanks in advance.

It doesn't scroll using any external magic keyboard

It work fine on desktop and any device but if I attach the magic keyboard to the iPad PRO, it doesn't scroll anymore by doing the 2 fingers gesture. It works fine on the Mac Book Pro magic keyboard.
Testing it on the Microsoft surface, same issue, it doesn't work.
There must be an event not catched.
Regards

Fix Inefficient Regular Expression Complexity

See Bounty. This is now being flagged when you do an npm audit on this repo
https://huntr.dev/bounties/8cf8cc06-d2cf-4b4e-b42c-99fafb0b04d0/

Unable to scroll over an iframe

Hi,
I need to use an iframe to display a form inside the scrollable section but the scroll doesn't work if I scroll over the iframe.
Any way to resolve this issue?

The markup looks like that:

<perfect-scrollbar>
  <div>content here...</div>
  <iframe></iframe>
  <div>content here...</div>
</perfect-scrollbar>

Scrolling works well over the content but not over the iframe.

Enable Touch support

Hey,

Thanks for creating a wrapper for vue2 that too with SSR support but this component do not work on mobile where Pointer is touch instead of mouse.

Please check.

Thanks!

How Can I prevent it from scrolling to top When update?

Toggle 'suppressScrollY' when I click the page,then update(). It scroll to top .
like this:
https://codesandbox.io/embed/vue-perfect-scrollbar-global-registration-5mf2l?fontsize=14
I hope to stay current positon. have to edit "index.js" of perfect-scrollbar .
method update:

update() {
    if (!this.isAlive) {
      return;
    }

    // Recalcuate negative scrollLeft adjustment
    this.negativeScrollAdjustment = this.isNegativeScroll
      ? this.element.scrollWidth - this.element.clientWidth
      : 0;

    // Recalculate rail margins
    CSS.set(this.scrollbarXRail, { display: 'block' });
    CSS.set(this.scrollbarYRail, { display: 'block' });
    this.railXMarginWidth =
      toInt(CSS.get(this.scrollbarXRail).marginLeft) +
      toInt(CSS.get(this.scrollbarXRail).marginRight);
    this.railYMarginHeight =
      toInt(CSS.get(this.scrollbarYRail).marginTop) +
      toInt(CSS.get(this.scrollbarYRail).marginBottom);

    // Hide scrollbars not to affect scrollWidth and scrollHeight
    CSS.set(this.scrollbarXRail, { display: 'none' });
    CSS.set(this.scrollbarYRail, { display: 'none' });

    updateGeometry(this);

    processScrollDiff(this, 'top', 0, false, true);
    processScrollDiff(this, 'left', 0, false, true);

    CSS.set(this.scrollbarXRail, { display: '' });
    CSS.set(this.scrollbarYRail, { display: '' });
  }

How can I set the scroll automatically to the end when there is new cards loaded?

I am using the scroll bar on the horizontal axis. I have cards added depending on the items selected and they show up in the right but the scroll does not go the end automatically. How can I do it?

depends on latest perfect-scrollbar ?

here's my situation:
I'm using vue2-perfect-scrollbar in my project, but found event listeners were not binding correctly in windows devices with touch screen. I noticed that perfect-scrollbar has fixed this but no one publish the new one to npm. However, this wrapper depends on perfect-scrollbar, what should i do ?

If I create a new repo, fork the latest perfect-scrollbar, build , and publish to npm, and do the same thing to vue2-perfect-scrollbar, do i break the license ? @mercs600

Problem when I try to build (Module build failed: TypeError: css.eachInside is not a function)

It arise a problem when try to build webpack:

ERROR in .//css-loader?{"minimize":true}!.//postcss-loader/lib?{"sourceMap":true}!.//resolve-url-loader!.//sass-loader/lib/loader.js?{"sourceMap":true}!./~/vue2-perfect-scrollbar/dist/vue2-perfect-scrollbar.min.css
Module build failed: TypeError: css.eachInside is not a function
at /node_modules/postcss-discard-comments/index.js:30:13
at LazyResult.run /node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:270:20)
at LazyResult.asyncTick (/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:185:32)
at LazyResult.asyncTick (/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:197:22)
at /postcss-loader/node_modules/postcss/lib/lazy-result.js:190:27
at

Unable to preventDefault inside passive event

Hi!
In mobile mode in Chrome, I get an error in the console when I try to drag the slider, because of this, the scroll does not work.
Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

version 1.5.0

Thx

Can't scroll when hover on table overflow auto

Vue2 perfect scroll bar can't scroll when user hover on table has style with overflow: auto
Reproduce:
https://codesandbox.io/s/vue-perfect-scrollbar-bug-on-table-responsive-4i877

Scrolling div height is not updated if I remove an item

See here: https://www.loom.com/share/b4c4e4da4cf1443fac1e9b59e348c33d

If there is an overflow, and I scroll to bottom and then delete an item, the list doesn't snap down to fill the blank. It only updates if I scroll up past where the blank space is.

Validation problems

Hello. I have a problem with validation, because of the css property 'overflow-anchor'. The error is
"CSS: overflow-anchor: Property overflow-anchor doesn't exist."

http://joxi.ru/KAgxEEatKnoYor

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?

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?

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?

How to disable horizontal scroll

Scrollbar is still showing

Once the scrollbar is visible, and I update the content to be smaller the container, the scroll bar does not disappear until I wheel

Infinite scrolling when box with border

Hi! In vue2-perfect-scrollbar 1.5.0 version was found bug: if div.ps have border, then can see infinite scroll (https://codesandbox.io/s/vue-perfect-scrollbar-global-registration-p7u5p?file=/src/App.vue - https://i.imgur.com/GVjEDYe.png).

Trouble scrolling up in android version of Firefox

Hi,

I'm having trouble with the lib on android version of Firefox. Scrolling down a page works perfectly, but scrolling up is troublesome. On android version of Firefox, scrolling up when already on top of a page will refresh the page, in my case the lib doesn't detect the scroll movement and Firefox will refresh the page instead, but if I first scroll down or horizontally then scroll up, keeping my thumb on the screen, it works.

You can see the problem on the current version of the site I'm working on at https://chats-des-rues-brest.fr/#/pages/Accueil

I don't know if my explanation are clear, don't hesitate to ask if you want more details :-)

Use as attribute

Hello,

Great plugin! Is there any way to use it as an attribute instead of using a component tag? For example,

<ul perfectScrollbar...

Basically, we want to avoid using it this way.

<perfect-scrollbar>
   <ul></ul>
</perfect-scrollbar>

Thanks

Vue Router ScrollBehavior option

Hi,

How can I make it work with Vue router's scrollBehavior Option?

.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 />.

new version 1.5.56

Hi @mercs600
Is this new version "1.5.56" correct?
The previous one was "1.5.5"
Looks like should be "1.5.6" instead

Using 2 scrollbar one of them in modal

Hi there,

my issues is, I use 2 scrollbar on page and one of them on bootstrap modal. when modal pops up and try to scroll by mouse wheel the scroll on main page scrolls as well. How can I prevent main page to scroll.

Cheers.

Throwing errors on touch move

Scrollbar throwing errors on touchMove (tablet/mobile).

[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.
touchMove @ app.js

Possible fix: vue2-perfect-scrollbar\dist\vue2-perfect-scrollbar.umd.js at line 1071: if(e.cancelable) e.preventDefault();

Classes of child DOM elements are not updated

Hello. I'm making a ListBox component. The component should have styled scrollbars and a perfect scrollbar is great for this, but there is a problem.
It lies in the fact that the class of the ListBox elements is not updated (not reactive?).
The ListBox component template looks like this:
<label v-for="(opt, i) in listOpt" :key="i" :class="{ checked: opt.checked }" > <input hidden type="checkbox" :value="opt.value" v-model="modelValue" /> <span>{{ opt.value.name }} </span> </label>
The tag should change its "checked" class if the checkbox is selected.
The problem is that I can't force it to change.
At the same time, if you do not wrap the list in , then everything works fine, the class changes. I don't understand how to fix this.

Sandbox here https://stackblitz.com/edit/nuxt-starter-asttfi?file=pages/index.vue
In Sandbox:
"Listbox" component - using "perfect-scrollbar" - no class hovering
"ListboxPsOff" component - without "perfect-scrollbar" - everything works, the class is hung

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.

can possible applied in body tag?

I want body tag to be perfect scroll

Bug : The scroll bar can extend infinitely,how can i fix it?

The scroll bar can extend infinitely ，how can i fix it

 <PerfectScrollbar class="perfect-scrollbar">
   <div style="width:100%">
      ...
      <v-icon>{{iconname}}</v-icon> 
      ...
   </div>
</PerfectScrollbar>

<style>
  .perfect-scrollbar {
    white-space: nowrap;
  }
</style>

Could not find a declaration file for module 'vue2-perfect-scrollbar'

module "e:/javascriptCoding/02.vue/vue/node_modules/vue2-perfect-scrollbar/dist/vue2-perfect-scrollbar.cjs"
Could not find a declaration file for module 'vue2-perfect-scrollbar'. 'e:/javascriptCoding/vue/node_modules/vue2-perfect-scrollbar/dist/vue2-perfect-scrollbar.cjs.js' implicitly has an 'any' type.
Try npm install @types/vue2-perfect-scrollbar if it exists or add a new declaration (.d.ts) file containing declare module 'vue2-perfect-scrollbar';

Bug "click element in Perfect-Scrollbar auto scroll to top"

Bug "click element in Perfect-Scrollber auto scroll to top"?

I'm touch scroll to bottom and I clicked element => Perfect-Scrollbar auto scroll to top../
I want when clicked scroll stay here!

How do you color the scrollbar?

How do you set the colors ?

cssnano dependency with vulnerabilities

Problem same like here mercs600/vue3-perfect-scrollbar#12

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.

No scrollbar after transform

My perfect-scrollbar is not visible :

.sidebar {
  transform: translateX(-100%);
}

<perfect-scrollbar class="sidebar">
     My sidebar
</perfect-scrollbar>

after a click, translateX property is set to 0% and the sidebar is visible. But the scrollbars doesnt appear

Typescript declarations, please?

It seems there are no typescript definitions. Could you please add a vue2-perfect-scrollbar.d.ts?

Possibility to always show scrollbar (not only on hover)

Is it possible to set the scrollbar to always be visible? It only shows on hover currently.

Propagation not stopped

Hi.

This is my setup:

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

Vue.use(PerfectScrollbar, {
  wheelPropagation: false
})

Both in firefox and chrome when I reach the bottom or the head of the div, the scroll is propagated to the parent.

This is from firefox inspector

function(e) {
  var positionTop =
    e.pageY -
    window.pageYOffset -
    i.scrollbarYRail.getBoundingClientRect().top;
  var direction = positionTop > i.scrollbarYTop ? 1 : -1;

  i.element.scrollTop += direction * i.containerHeight;
  updateGeometry(i);

  e.stopPropagation();
}