Wrongly visible on the left / race condition in scrollbarYRight detection

Hi, after a long journey with simplebar and OverlayScrollbars I’ve finally settled on perfect-scrollbar for a larger project, as that was the only one not messing with the container’s styling. It is kind of perfect, really.

One bug I have is that it mistakenly thinks that the scrollbar should be on the left.

What is happening is that scrollbarYRight detection needs to wait a bit, otherwise it gets detected as missing / isNaN / isScrollbarYUsingRight = false.

Problematic part: https://github.com/utatti/perfect-scrollbar/blob/54103fab66ae255ef73aeea57e095385e03c6c01/src/index.js#L119

If I enter:

console.log(railYStyle.right)   -> ''

window.setTimeout(() => {
  console.log(railYStyle.right)  -> '0px'
}, 0)

The first line will output '' while the timeout one will return 0px. Also, 0px is something that should be taken care of, as it’s not an integer.

I’ve seen other issues about left side visibility, I believe they were running into the exact same issue. https://github.com/utatti/perfect-scrollbar/issues/784

I cannot make a fiddle out of it, as in simple example the race condition doesn’t happen.

Ugly workaround:

.ps__rail-y {
  left: auto !important;
}

[andrey-hohlov]

The same problem with Vue directive. Looks like Vue.nextTick() helps.

import Vue from 'vue';
import PS from 'perfect-scrollbar';

const cache = new WeakMap();

export default {
  bind(el, binding) {
    if (typeof window === 'undefined') return;

    const defaults = {
      wheelPropagation: true,
      suppressScrollX: true,
    };

    Vue.nextTick(() => {
      const ps = new PS(el, Object.assign(defaults, binding.value));
      cache.set(el, ps);
    });
  },
  update(el) {
    const ps = cache.get(el);
    if (ps) {
      ps.update();
    }
  },
  componentUpdated(el) {
    const ps = cache.get(el);
    if (ps) {
      ps.update();
    }
  },
  unbind(el) {
    const ps = cache.get(el);
    cache.delete(el);
    if (ps) {
      ps.destroy();
    }
  },
};

[hakimio]

@handhikadj Try the following CSS fix:

/* Fix for perfect scrollbar appearing on left instead of normal right position */
.ps__rail-y {
    right: 0 !important;
    left: unset !important;
}
.ps__rail-x {
    top: unset !important;
    bottom: 0 !important;
}