como ocultar uma barra de rolagem vertical quando não for necessária

Eu tenho uma textarea que está contida em uma div, pois tenho a dica do jquery e queria usar a opacidade sem alterar a borda. Há uma barra de rolagem vertical visível como eu só quero que seja exibida quando estou digitando no campo de texto e vai além do contêiner. Eu tentei overflow: auto; mas não 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
fonte

Possível duplicata do CSS ocultar barra de rolagem se não for necessário

— Eren Tantekin

Respostas:

199

overflow: auto(ou overflow-y: auto) é o caminho correto a seguir.

O problema é que sua área de texto é mais alta que seu div. A div acaba cortando a caixa de texto, portanto, embora pareça que deve começar a rolar quando o texto for mais alto, 159pxela não começará a rolar até que o texto seja mais alto do 400pxque a altura da caixa de texto.

Experimente: http://jsfiddle.net/G9rfq/1/

Eu defini overflow: auto na caixa de texto e tornei a caixa de texto do mesmo tamanho que o div.

Também não acredito que seja válido ter um divdentro de um label, o navegador irá renderizá-lo, mas pode fazer com que coisas estranhas aconteçam. Além disso, o seu divnão está fechado.

— Davy8
fonte

Como fazer essa solução funcionar quando personalizamos a barra de rolagem usando o elemento psuedo -webkit-scrollbar. ? porque se o estouro é auto psuedo elementos não estão funcionando .... Eu quero personalizar minha barra de rolagem, bem como ocultá-la quando não for necessário?

— Kpatel1989

overflow: auto;ou overflow: hidden;deveria fazer, eu acho.

— Boris Bachovski
fonte

Como eu disse em minha pergunta overflow: auto; não funciona :(

— Lukus

oculto oculta a barra de rolagem, mas uma vez que o texto passa pela div, ele não exibe a barra de rolagem, portanto, não pode rolar para baixo para ver o resto do texto

— Lukus

Acabei de testar e funciona bem. Qual navegador você está usando?

— Boris Bachovski,

Estou usando o Firefox, mas no IE oculto mostra a barra de rolagem, não importa se o texto passa div e com auto, uma vez que passa o contêiner DIV, a barra de rolagem não mostra

— Lukus

Tente adicionar position: relative;na#name div

— Boris Bachovski

Adicione esta classe na 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 usar a classe em div. como aqui.

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

Anexei a imagem, você vê a saída do código acima insira a descrição da imagem aqui

— Temerário
fonte