> Faqs > ¿Cómo hacer en CSS que las barras de scroll aparezcan en un elemento, solo en la vertical?

¿Cómo hacer en CSS que las barras de scroll aparezcan en un elemento, solo en la vertical?

Tengo un elemento de la página que tiene más contenido del que puede aparecer en el espacio que le he reservado.

Tengo el estilo de overflow hidden para que no crezca el elemento, porque me rompe el diseño:

element {
    overflow: hidden;
}

Mi problema en este punto es que me gustaría que apareciesen las barras de scroll pero solamente para este elemento, es decir, que tenga una región de scroll específica para este elemento, pero que el scrollo solamente sea en la vertical.

¿Como lo monto con CSS para que aparezcan las barras de scroll solamente en la vertical?

Respuestas

En realidad si usas overflow:hidden lo que estás haciendo es que no aparezcan las barras de scroll.

Si quieres que las barras de scroll aparezcan solamente en la vertical, tienes que usar el atributo overflow-y:

Esa sería la regla para que la barra de scroll aparezca solamente en los casos que deba aparecer realmente. Es decir, si se necesita.

#element {
    overflow-y: auto;
}

Ahora puedes ver otro estilo con el que conseguirías que la barra de scroll esté siempre presente, independientemente de si realmente hace falta (porque el contenido no quepa) o no.

#element {
    overflow-y: scroll;
}

Puedes leerte este artículo con explicaciones detalladas del atributo overflow.

Juanjo
99 4 6 1
Si usas overflow: auto tambien funfionaria, siempre que el contenido sea adecuado. Si quieres scroll solo en la vertical es mejor forzarlo, por si el contenido no se adapta bien al espacio.

La solución sería:

.element {
    overflow-x: hidden;
    overfloy-y: scroll;
}

Así fuerzas que no haya scroll en la horizontal, ya que con overflow-x: hidden; estarías haciendo que si no hay espacio suficiente, simplemente no se vea el contenido.

Por otra parte overfloy-y: scroll; hace que siempre haya barra de scroll vertical, pero quizás sea más lógico:

.element {
    overflow-x: hidden;
    overfloy-y: auto;
}

para que se consiga que el scroll aparezca solo cuando realmente sea necesario.

Borja
183 4 14 11