Cómo ocultar la barra de desplazamiento mediante CSS

Existen varias formas de ocultar la barra de desplazamiento mediante CSS, dependiendo de si desea eliminar por completo el desplazamiento o simplemente ocultar la apariencia visual de la barra de desplazamiento.

Ocultar la barra de desplazamiento pero seguir desplazándose

Para ocultar la barra de desplazamiento visualmente y permitir el desplazamiento:

/* For modern browsers */
.block {
  overflow: auto; /* or scroll */
  scrollbar-width: none; /* Firefox */
}

.block::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

Deshabilitar completamente el desplazamiento

Si desea deshabilitar completamente el desplazamiento (y ocultar la barra de desplazamiento):

.block {
  overflow: hidden;
}

Este método bloquea tanto el desplazamiento vertical como el horizontal.

Ocultar solo las barras de desplazamiento horizontales o verticales

Solo horizontal:

.block {
  overflow-x: hidden;
}

Solo verticales:

.block {
  overflow-y: hidden;
}

Para toda la página

Para ocultar la barra de desplazamiento en todo el documento:

html, body {
  overflow: hidden;
}

Si desea que el contenido permanezca desplazable pero solo oculte la barra de desplazamiento, utilice el primer método.