Entonces la barra de desplazamiento no se muestra al ingresar a la página, solo aparece si usando el desplazamiento del mouse ya intenté poner: índice z: 10
desbordamiento: rodar
!importante
Pero ninguno funciono, sigue con el mismo bug, no se que puede ser. Estoy usando plugin-perfect-scrollbar.scss en la versión 1.4.0
Envase
.ps { background-color: aqua; }barra de desplazamiento
.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; }Tienes que configurar overflow: scroll; luego puede insertar una barra de desplazamiento manual agregando ::-webkit-scrollbar en su CSS. Significado: siempre que haya una barra de desplazamiento o un overflow: scroll; estos estilos surtirán efecto.
Mini demostración a continuación:
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>