cómo ocultar una barra de desplazamiento vertical cuando no es necesario

Question

Tengo un área de texto que está contenida en un div ya que tengo una sugerencia de jquery y quería usar opacidad sin cambiar el borde. Hay una barra de desplazamiento vertical visible en la que solo quiero que se muestre cuando escribo en el campo de texto y va más allá del contenedor. He intentado el desbordamiento: automático; pero no funciona.

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> 

Estilos:

#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) es la forma correcta de hacerlo.

El problema es que su área de texto es más alta que su div. La div termina cortando el cuadro de texto, por lo que aunque parece que debería comenzar a desplazarse cuando el texto es más alto que 159px, no comenzará a desplazarse hasta que el texto sea más alto que 400px, que es el alto del cuadro de texto.

Prueba esto: http://jsfiddle.net/G9rfq/1/

puse overflow: auto en el cuadro de texto, e hizo el cuadro de texto del mismo tamaño que el div.

Además, no creo que sea válido tener un div dentro de un label, el navegador lo renderizará, pero podría causar algunas cosas funky. Además, su div no está cerrado.

Answer 2

overflow: auto; o overflow: hidden; debería hacerlo, creo.

Answer 3

Añadir esta clase en clase css

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

y utilizar la clase en div. como aquí.

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

He adjuntado la imagen, se ve la salida de poner el código anterior