scrollbar does not appear

Question

So the scrollbar is not showing when entering the page, it only appears if using mouse scroll I already tried to put: z index: 10

overflow: roll

!important

But none worked, it still has the same bug, I don't know what it could be. I'm using plugin-perfect-scrollbar.scss in version 1.4.0

Container

.ps {
  background-color: aqua;
}

scrollbar

.ps__rail-x {
  display: none;
  opacity: 1 !important;
  transition: background-color .2s linear, opacity .2s linear;
  -webkit-transition: background-color .2s linear, opacity .2s linear;
  height: 15px;
  /* there must be 'bottom' or 'top' for ps__rail-x */
  bottom: 0px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__rail-y {
  display: none;
  opacity: 1 !important;
  transition: background-color .2s linear, opacity .2s linear;
  -webkit-transition: background-color .2s linear, opacity .2s linear;
  width: 15px;
  /* there must be 'right' or 'left' for ps__rail-y */
  right: 0;
  /* please don't change 'position' */
  position: absolute;
}

Answer 1

You have to set overflow: scroll; then you can insert a manual scrollbar by adding ::-webkit-scrollbar in your CSS. Meaning - wherever there is a scrollbar or an overflow: scroll; these styles will take effect.

Mini demonstration below:

div {
  border: solid black 1px;
  width: 300px;
  height: 40px;
  overflow: scroll;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 10px 10px #ffd110;
}

::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 10px 10px black;
}

<div>
  <p>DIVDIVDIVDIVDIVDIVDIVDIVDIV<br>DIVDIVDIVDIVDIVDIVDIVDIVDIVDIVDIVDIVDIVDIVDIVDIVDIVDIVDIVDIVDIVDIVDIVDIVDIV</p>
</div>