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