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

95

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
4

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
2

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