Perfect-scrollbar: implementation of scroll in directive vue js

[yabikusensei]

Make sure these boxes are checked before submitting your issue -- thank you!

hello I was trying to implement the script to vue js as a directive, but the bar always appears to the left, it seems that it is a problem with the styles, try putting it in! important the right position but it seems that it does not read it well.

[hatashiro]

Please check if the container has position style and other styles are imported correctly. For detailed usage, please refer to How to use. vue-perfect-scrollbar may help, but it's not maintained by us and I've not yet tried it.

If there is still an issue, please provide an example page or a fiddle. Thanks!

[yabikusensei]

Thanks for your helping. I was have imported good the file css . Well i will try el vue-perfect-scrollbar . thanks so much

[abensur]

@sebastian-yabiku I'm using this implementation as a Directive:

import PS from 'perfect-scrollbar'

export default {
  name: 'scroll',
  inserted (el, binding, vnode) {
    if (binding.value) {
      const callback = typeof binding.value === 'function'
        ? binding.value
        : binding.value.callback

      el.addEventListener('scroll', callback, { passive: true })
    }

    el.style.position = 'relative'
    PS.initialize(el)

    let ticks = 0
    const interval = setInterval(() => {
      PS.update(el)
      ticks++
      if (ticks >= 20) clearInterval(interval)
    }, 200)
  },
  unbind (el, binding) {
    if (binding.value) {
      el.removeEventListener('scroll', binding.callback, { passive: true })
    }

    el.style.position = 'static'
    PS.destroy(el)
  },
  componentUpdated (el) {
    PS.update(el)

    let ticks = 0
    const interval = setInterval(() => {
      PS.update(el)
      ticks++
      if (ticks >= 20) clearInterval(interval)
    }, 200)
  }
}

then i just place v-scroll in the desired component, working for vertical and horizontal scroll