HTML: Come creare un DIV con solo barre di scorrimento verticali per paragrafi lunghi?

136

Voglio mostrare termini e condizioni sul mio sito web. Non voglio usare il campo di testo e non voglio usare tutta la mia pagina. Voglio solo mostrare il mio testo nell'area selezionata e voglio usare solo la barra di scorrimento verticale per andare giù e leggere tutto il testo.

Attualmente sto usando questo codice:

<div style="width:10;height:10;overflow:scroll" >
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
</div>

Due problemi:

Non sta riparando la larghezza e l'altezza e la diffusione fino a quando non appare tutto il testo.
In secondo luogo mostra la barra di scorrimento orizzontale e non voglio mostrarlo.

css html overflow

— awan
fonte

Il problema di larghezza / altezza è risolto da "Daniel Vassallo" e il problema della barra di scorrimento orizzontale è risolto da "janmoesen". Ora, chi è la risposta che dovrei accettare :) posso selezionare più;)

— Awan

238

Usa overflow-y. Questa proprietà è CSS 3.

— janmoesen
fonte

Il problema di larghezza / altezza è risolto da "Daniel Vassallo" e il problema della barra di scorrimento orizzontale è risolto da "janmoesen". Ora, chi è la risposta che dovrei accettare :) posso selezionare più;)

— Awan

21

È abbastanza ovvio: scegli sempre il perdente, ovvero: quello con la reputazione più bassa. ;-)

— janmoesen,

Hahaha. Ma la tua risposta non è dettagliata in "Daniel Vassallo" :)

— Awan,

Mi sforzo di "less is more" e di lasciare che i link parlino. Comunque, scegline uno e passa un buon fine settimana!

— Janmoesen,

14

Credo che lo standard qui sia di non rispondere a una domanda con "solo" un collegamento, poiché i collegamenti potrebbero non essere validi. È necessario includere informazioni sufficienti per rispondere alla domanda direttamente nella risposta, quindi avere il collegamento come riferimento.

— Jeffrey Harmon,

66

per nascondere le barre di scorrimento orizzontali, puoi impostare overflow-x su hidden, in questo modo:

overflow-x: hidden;

— Kornelius
fonte

Sento che questa è la risposta che il ricercatore voleva ... meriti più credito

— Ian Wise,

52

Devi specificare widthe heightin px:

width: 10px; height: 10px;

Inoltre, è possibile utilizzare overflow: auto;per impedire la visualizzazione della barra di scorrimento orizzontale.

Pertanto, potresti voler provare quanto segue:

<div style="width:100px; height:100px; overflow: auto;" >
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
</div>

— Daniel Vassallo
fonte

La larghezza e l'altezza ora funzionano ma la barra di scorrimento orizzontale non viene ancora rimossa.

— Awan,

Il problema di larghezza / altezza è risolto da "Daniel Vassallo" e il problema della barra di scorrimento orizzontale è risolto da "janmoesen". Ora, chi è la risposta che dovrei accettare :) posso selezionare più;)

— Awan

19

Prima grazie

Usalo overflow:autofunziona per me.

la barra di scorrimento orizzontale scompare.

— Raji
fonte

15

In ogni caso impostato overflow-xsu hiddene preferisco impostare max-heightper limitare l'espansione dell'altezza del div. Il tuo codice dovrebbe apparire così:

overflow-y: scroll;
overflow-x: hidden;
max-height: 450px;

— Brane
fonte

13

Per mostrare la barra di scorrimento verticale nel tuo div devi aggiungere

height: 100px;   
overflow-y : scroll;

o

height: 100px; 
overflow-y : auto;

— Ricardo Romo
fonte

2

Preferisco usare max-height: 100px;.

— Roman

A causa della mia configurazione heightmancava, quindi non mostravo le barre di scorrimento verticali, sebbene height:100%;funzionasse meglio per me.

— SharpC

3

overflow-y : scroll;
overflow-x : hidden;

height è facoltativo

— Amobi Chuks
fonte

2

È possibile utilizzare la proprietà di overflow

style="overflow: scroll ;max-height: 250px; width: 50%;"

— Sunil Kumar
fonte

1

Ho anche affrontato lo stesso problema ... prova a farlo ... questo ha funzionato per me

        .scrollBbar 
        {
        position:fixed;
        top:50px;
        bottom:0;
        left:0;
        width:200px;
        overflow-x:hidden;
        overflow-y:auto;
       }

— singhkumarhemant
fonte

0

Questo è il mio mix:

overflow-y: scroll;
height: 13em; // Initial height.
resize: vertical; // Allow user to change the vertical size.
max-height: 31em; // If you want to constrain the max size.

— Daniel De León
fonte