Barra de desplazamiento de ocultar CSS si no es necesario

436

Estoy tratando de descubrir cómo puedo ocultar el overflow-y:scroll;si no es necesario. Lo que quiero decir es que estoy construyendo un sitio web y tengo un área principal en la que se mostrarán las publicaciones y quiero ocultar la barra de desplazamiento si el contenido no supera el ancho actual.

Además, mi segunda pregunta. Quiero hacerlo para que cuando las publicaciones excedan el ancho actual, el ancho aumente automáticamente y el contenido no salga de la caja.

¿Alguien tiene idea de cómo hacer esto?

Área de publicaciones:

.content {
    height: 600px;
    border-left: 1px solid;
    border-right: 1px solid;
    border-bottom: 1px solid;
    font-size: 15px;
    text-align: justify;
    line-height: 19px;
    overflow-y:scroll;
}

Contenedor del sitio web principal:

.container {
    margin: 0 auto;
    width: 757px;
    margin-top: 30px;
    text-align: center;
}
html css Thanos Paravantis
fuente
¿Desea ocultar la barra de desplazamiento vertical u horizontal? ¿Puede publicar el ejemplo con código html en, por ejemplo, jsfiddle.net y vincularlo aquí
RJo
Hola, publiqué las 2 clases que estoy usando. En el html, nada más que llamar a clases.
Thanos Paravantis

Respuestas:

745

Establezca la overflow-ypropiedad en auto, o elimine la propiedad por completo si no se hereda.

RJo
fuente
Podría pero necesito ayuda con mi segunda pregunta también, sobre el ancho, el aumento automático.
Thanos Paravantis
Siempre puede intentar usar la búsqueda de stackoverflow
RJo
¿Dónde está scroll en tus ejemplos?
Verde
13
Mientras configuraba el overflow-y: autoproblema resuelto, el enlace en realidad no muestra un ejemplo de esto ...
Sombra
2
Debe tener en cuenta que overflow-x: autotambién funciona para ocultar barras de desplazamiento horizontales.
Edward D'Souza el
40

Puedes usar overflow:auto;

También puede controlar el eje x o y individualmente con las propiedades overflow-xy overflow-y.

Ejemplo:

.content {overflow:auto;}
.content {overflow-y:auto;}
.content {overflow-x:auto;}
Ayyappan K
fuente
20
Aunque le agradecemos su respuesta, sería mejor si proporcionara un valor adicional además de las otras respuestas. En este caso, su respuesta no proporciona un valor adicional, ya que otro usuario ya publicó esa solución. Si una respuesta anterior fue útil para usted, debe votarla en lugar de repetir la misma información.
Toby Speight
9

Puede usar .content y .container para desbordar: auto. Significa que si se excede el texto, automáticamente se desplazará el eje x y el eje y. (no es necesario dar separete el eje x y el eje y comúnmente dan desbordamiento: auto)

.content {desbordamiento: auto;}

Ayyappan K
fuente
5 
.selected-elementClass{
    overflow-y:auto;
}
Prateek Arora
fuente
1

.container {overflow: auto;} hará el truco. Si desea controlar una dirección específica, debe configurar auto para ese eje específico. AE

.container {overflow-y: auto;} .container {overflow-x: hidden;}

El código anterior ocultará cualquier desbordamiento en el eje x y generará una barra de desplazamiento cuando sea necesario en el eje y. Pero debe asegurarse de que la altura predeterminada del contenido sea menor que la altura del contenedor; si no, la barra de desplazamiento no estará oculta.

Neero
fuente