come nascondere una barra di scorrimento verticale quando non necessario

Question

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 mostrarla solo quando sto digitando il campo di testo e va oltre il contenitore. Ho provato overflow: auto; ma non funziona

Textfield:

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

Answer 1

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

Il problema è che l'area di testo è più alta del div. Il div finisce per tagliare la casella di testo, quindi, anche se sembra che debba iniziare a scorrere quando il testo è più alto di 159px, non inizierà lo scorrimento finché il testo non sarà più alto di 400px, che è l'altezza della casella di testo.

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

ho impostato overflow: auto sulla casella di testo, e ha reso la casella di testo le stesse dimensioni del div.

Inoltre, non credo che sia valido avere un div all'interno di un label, il browser lo renderà, ma potrebbe causare alcune cose funky per accadere. Anche il tuo div non è chiuso.

Answer 2

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

Answer 3

Aggiungi questa classe nel css classe

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

e utilizzare la classe in div. come qui.

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

Ho allegato delle immagini, si vede il fuori messo del codice di cui sopra