cómo ocultar una barra de desplazamiento vertical cuando no se necesita

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

Campo de texto:

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

html css forms

— Lukus
fuente

Posible duplicado de CSS ocultar barra de desplazamiento si no es necesario

— Eren Tantekin

Respuestas:

199

overflow: auto(o overflow-y: auto) es el camino correcto a seguir.

El problema es que su área de texto es más alta que su div. El 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 159px, no comenzará a desplazarse hasta que el texto sea más alto 400pxque la altura del cuadro de texto.

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

Configuré overflow: auto en el cuadro de texto e hice que el cuadro de texto tuviera el mismo tamaño que el div.

Además, no creo que sea válido tener un divinterior label, el navegador lo renderizará, pero podría causar que sucedan algunas cosas extrañas. Además, divno está cerrado.

— Davy8
fuente

Cómo hacer que esta solución funcione cuando hemos personalizado la barra de desplazamiento usando el elemento psuedo -webkit-scrollbar. ? porque si el desbordamiento es auto psuedo, los elementos no funcionan ... ¿Quiero personalizar mi barra de desplazamiento y ocultarla cuando no sea necesario?

— Kpatel1989

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

— Boris Bachovski
fuente

Como he dicho en mi pregunta overflow: auto; no funciona :(

— Lukus

oculto oculta la barra de desplazamiento, pero una vez que los textos pasan el div, no muestra la barra de desplazamiento, por lo que no puede desplazarse hacia abajo para ver el resto del texto

— Lukus

Lo acabo de probar y funciona bien. ¿Qué navegador estás usando?

— Boris Bachovski

Estoy usando Firefox pero en IE hidden muestra la barra de desplazamiento sin importar si el texto pasa div y con auto una vez que pasa el contenedor DIV, la barra de desplazamiento no se muestra

— Lukus

Intente agregar position: relative;el#name div

— Boris Bachovski

Agregue esta clase en la 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 usa la clase en div. como aquí.

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

He adjuntado una imagen, ves la salida del código anterior ingrese la descripción de la imagen aquí

— Temerario
fuente