come nascondere una barra di scorrimento verticale quando non è necessaria

Ho una textarea che è contenuta in un div poiché ho un suggerimento jquery e volevo usare l'opacità senza cambiare il bordo. C'è una barra di scorrimento verticale visibile come voglio che venga visualizzata solo quando sto digitando nel campo di testo e va oltre il contenitore. Ho provato overflow: auto; ma non funziona.

Campo di testo:

<label>
    <div id="name">
        <textarea name="message" type="text" id="message"
            title="Enter Message Here"
            rows=9 cols=60 maxlength="2000"></textarea>
    </div>
</label>

Stili:

#name { 
    border: 1px solid #c810ca;
    width: 270px;
    height:159px;
    overflow: hidden; 
    position: relative;
    }

#message {
    height: 400px;
    width: 235px;
    overflow: hidden;
    position: absolute;
}

html css forms

— Lukus
fonte

Possibile duplicato della barra di scorrimento nascosta CSS se non necessaria

— Eren Tantekin

Risposte:

199

overflow: auto(o overflow-y: auto) è il modo corretto di procedere.

Il problema è che la tua area di testo è più alta del tuo div. Il div finisce per tagliare la casella di testo, quindi anche se sembra che dovrebbe iniziare a scorrere quando il testo è più alto di 159pxquanto non inizierà a scorrere fino a quando il testo non sarà più alto di 400pxquale è l'altezza della casella di testo.

Prova questo: http://jsfiddle.net/G9rfq/1/

Ho impostato overflow: auto sulla casella di testo e ho reso la casella di testo delle stesse dimensioni del div.

Inoltre non credo sia valido avere un divinterno a label, il browser lo visualizzerà, ma potrebbe causare alcune cose strane. Inoltre il tuo divnon è chiuso.

— Davy8
fonte

Come far funzionare questa soluzione quando abbiamo personalizzato la barra di scorrimento utilizzando l'elemento -webkit-scrollbar psuedo. ? perché se l'overflow è che gli elementi auto psuedo non funzionano .... voglio personalizzare la mia barra di scorrimento e nasconderla quando non è necessario?

— Kpatel1989

overflow: auto;o overflow: hidden;dovrebbe farlo credo.

— Boris Bachovski
fonte

Come ho detto nella mia domanda overflow: auto; non funziona :(

— Lukus

nascosto nasconde la barra di scorrimento ma una volta che il testo supera il div non mostra la barra di scorrimento, quindi non può scorrere verso il basso per vedere il resto del testo

— Lukus

L'ho appena provato e funziona bene. Quale browser utilizzate?

— Boris Bachovski

Sto usando Firefox ma in IE nascosto mostra la barra di scorrimento indipendentemente dal fatto che il testo passi div e con auto una volta che passa il contenitore DIV la barra di scorrimento non viene visualizzata

— Lukus

Prova ad aggiungere position: relative;il#name div

— Boris Bachovski

Aggiungi questa classe nella classe .css

.scrol  { 
font: bold 14px Arial; 
border:1px solid black; 
width:100% ; 
color:#616D7E; 
height:20px; 
overflow:scroll; 
overflow-y:scroll;
overflow-x:hidden;
}

e usa la classe in div. come qui.

<div> <p class = "scrol" id = "title">-</p></div>

Ho allegato un'immagine, vedete l'output del codice sopra inserisci qui la descrizione dell'immagine

— DareDevil
fonte