javascript - saber - Hacer visible la barra de desplazamiento en los navegadores móviles

saber cuando se hace scroll jquery

Question

Cuando tengo una página web con un contenido desplazable. Con la propiedad css "overflow: auto" o "overflow: visible" la barra de desplazamiento está visible en los navegadores de escritorio, pero cuando abro la página en los navegadores móviles, la barra de desplazamiento aparece solo cuando intento desplazarme. ¿Hay alguna forma de hacer que la barra de desplazamiento esté siempre visible en dispositivos móviles? He probado algunas bibliotecas de JQuery pero ninguna de ellas ha funcionado.

El código html es trivial, tengo un div desplazable con un IFrame dentro:

<div id="wrapper">
    <iframe id="frameContent" src="mysite" scrollable="yes"></iframe>
</div>

El css:

#wrapper{
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    width: 500px;
    height: 200px;
}

#frameContent{
    width: 100%;
    height: 100%;
} 

Answer 1

Intente agregar lo siguiente a su CSS, tenga en cuenta que esto es specific webkit :

Demo Fiddle

::-webkit-scrollbar {
    -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
    width: 12px;
}

::-webkit-scrollbar:horizontal {
    height: 12px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 10px;
    border: 2px solid #ffffff;
}

::-webkit-scrollbar-track {
    border-radius: 10px;  
    background-color: #ffffff; 
}

Answer 2

Puede usar la barra de desplazamiento personalizada agregando el complemento nanoscroller .

Ejemplo de JSFiddle

código javascript.

$(".nano").nanoScroller({
    alwaysVisible: true,
});

establece el elemento contenedor de estilo css para overflow: hidden;

Propiedad plugin siempre alwaysVisible

configúrelo en verdadero para evitar que la barra de desplazamiento se oculte automáticamente.

Answer 3

  /* !important is needed sometimes */
 ::-webkit-scrollbar {
    width: 12px !important;
 }

 /* Track */
::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3) !important;
   -webkit-border-radius: 10px !important;
   border-radius: 10px !important;
 }

 /* Handle */
 ::-webkit-scrollbar-thumb {
   -webkit-border-radius: 10px !important;
   border-radius: 10px !important;
   background: #41617D !important; 
   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5) !important; 

 }
 ::-webkit-scrollbar-thumb:window-inactive {
   background: #41617D !important; 
 }

Agregue este código CSS: cambiará el estilo de la barra de desplazamiento solo en dispositivos móviles