Ocultar la barra de desplazamiento mientras se mantiene la capacidad de desplazamiento

A pesar de deshabilitar la barra de desplazamiento mediante desbordamiento: oculto, se perdió la funcionalidad de desplazamiento. Para solucionar este problema, existe una solución alternativa que combina un contenedor de CSS con cálculos de JavaScript.

Solución de JavaScript y CSS

Utilice el siguiente código CSS y JavaScript:

#wrapper {
  overflow: hidden;
}

// Calculate the width of the element excluding the scrollbar
var elementWidth = document.getElementById("element").scrollWidth;

// Set the wrapper width to match the element width
document.getElementById("wrapper").style.width = elementWidth   "px";

Al ocultar la barra de desplazamiento con CSS y ajustar el ancho del contenedor para que coincida con el ancho del contenido real, puede conservar la funcionalidad de desplazamiento mediante el mouse. o teclado.

Técnica adicional

Para crear un div desplazable sin una barra de desplazamiento visible, emplee el mismo principio. Simplemente agregue overflow-y: scroll; propiedad al elemento interno.