Ocultar la barra de desplazamiento, pero sin dejar de poder desplazarse
Quiero poder desplazarme por toda la página, pero sin que se muestre la barra de desplazamiento.
En Google Chrome es:
::-webkit-scrollbar {
display: none;
}
Pero Mozilla Firefox e Internet Explorer no parecen funcionar así.
También probé esto en CSS:
overflow: hidden;
Eso oculta la barra de desplazamiento, pero ya no puedo desplazarme.
¿Hay alguna manera de eliminar la barra de desplazamiento y al mismo tiempo poder desplazarme por toda la página?
Con solo CSS o HTML, por favor.
Sólo una prueba que está funcionando bien.
#parent{
width: 100%;
height: 100%;
overflow: hidden;
}
#child{
width: 100%;
height: 100%;
overflow-y: scroll;
padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
box-sizing: content-box; /* So the width will be 100% + 17px */
}
violín de trabajo
JavaScript:
Dado que el ancho de la barra de desplazamiento difiere en diferentes navegadores, es mejor manejarlo con JavaScript. Si lo hace Element.offsetWidth - Element.clientWidth, aparecerá el ancho exacto de la barra de desplazamiento.
Violín de trabajo de JavaScript
O
Usando Position: absolute,
#parent{
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#child{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
overflow-y: scroll;
}
violín de trabajo
Violín de trabajo de JavaScript
Información:
Según esta respuesta, creé un complemento de desplazamiento simple .
Esto me funciona con propiedades CSS simples:
.container {
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */
}
.container::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
Para versiones anteriores de Firefox, utilice:overflow: -moz-scrollbars-none;
