CSS nasconde la barra di scorrimento se non necessario

436

Sto cercando di capire come posso nascondere il overflow-y:scroll;se non necessario. Ciò che intendo è che sto costruendo un sito Web e ho un'area principale in cui verranno visualizzati i post e voglio nascondere la barra di scorrimento se il contenuto non supera la larghezza corrente.

Inoltre, la mia seconda domanda. Voglio farlo in modo che quando i post superano la larghezza corrente, la larghezza aumenterà automaticamente e il contenuto non uscirà fuori dalla scatola.

Qualcuno ha la minima idea di come farlo?

Area messaggi:

.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;
}

Contenitore principale del sito Web:

.container {
    margin: 0 auto;
    width: 757px;
    margin-top: 30px;
    text-align: center;
}

html css

— Thanos Paravantis
fonte

Vuoi nascondere la barra di scorrimento verticale o orizzontale? Puoi pubblicare l'esempio con il codice html su, ad esempio, jsfiddle.net e collegarlo qui

— RJo

Ciao, ho pubblicato le 2 classi che sto usando. Sull'html, nient'altro che chiamare classi.

— Thanos Paravantis,

745

Impostare la overflow-yproprietà su autoo rimuovere del tutto la proprietà se non viene ereditata.

— RJO
fonte

Potrei, ma ho bisogno di aiuto anche con la mia seconda domanda, sulla larghezza, sull'aumento automatico.

— Thanos Paravantis,

Si può sempre provare a utilizzare la ricerca StackOverflow: stackoverflow.com/questions/450903/...

— RJO

Dov'è lo scorrimento nei tuoi esempi?

— Green,

13

Mentre risolvo il overflow-y: automio problema risolto - il link in realtà non mostra un esempio di questo ...

— Shadow

2

Va notato che overflow-x: autofunziona anche per nascondere le barre di scorrimento orizzontali.

— Edward D'Souza,

40

Puoi usare overflow:auto;

Puoi anche controllare l'asse x o y individualmente con le proprietà overflow-xe overflow-y.

Esempio:

.content {overflow:auto;}
.content {overflow-y:auto;}
.content {overflow-x:auto;}

— Ayyappan K
fonte

20

Sebbene ti ringraziamo per la tua risposta, sarebbe meglio se fornisse un valore aggiuntivo rispetto alle altre risposte. In questo caso, la tua risposta non fornisce un valore aggiuntivo, poiché un altro utente ha già pubblicato quella soluzione. Se una risposta precedente ti è stata utile, dovresti votarla invece di ripetere le stesse informazioni.

— Toby Speight,

9

Puoi usare sia .content che .container per overflow: auto. Significa che se il testo viene superato automaticamente, lo scorrimento arriverà all'asse x e all'asse y. (non è necessario fornire l'asse x e l'asse y separati in genere danno overflow: auto)

.content {overflow: auto;}

— Ayyappan K
fonte

5

.selected-elementClass{
    overflow-y:auto;
}

— Prateek Arora
fonte

1

.container {overflow: auto;} farà il trucco. Se si desidera controllare una direzione specifica, è necessario impostare auto per quell'asse specifico. AE

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

Il codice sopra nasconderà qualsiasi overflow nell'asse x e genererà una barra di scorrimento quando necessario sull'asse y.Ma devi assicurarti di avere un'altezza predefinita del contenuto inferiore all'altezza del contenitore; in caso contrario, la barra di scorrimento non sarà nascosta.

— Neero
fonte