Como tornar a barra de rolagem em uma div visível apenas quando necessário?

151

Eu tenho esta div:

<div style='overflow:scroll; width:400px;height:400px;'>here is some text</div>

As barras de rolagem estão sempre visíveis, mesmo que o texto não ultrapasse. Quero tornar as barras de rolagem visíveis apenas quando necessário - ou seja, apenas visíveis quando houver texto suficiente na caixa para que sejam necessárias. Como uma área de texto faz. Como eu faço isso? Ou é minha única opção de estilizar uma área de texto para que ela pareça uma div?

css html scrollbar Benubird
fonte
Que tal isso? Mostra apenas a barra de rolagem ao passar o mouse. Não tenho certeza se isso é útil para você. stackoverflow.com/questions/7125185/…
Ryan Beaulieu
codepen.io/anon/pen/QwLeMG Espero que isso pode ajudá-lo
vishalkin
overflow: auto;não funciona no Android :-(
aioobe

Respostas:

312

Use overflow: auto. As barras de rolagem aparecerão apenas quando necessário.

(Sidenote, você também pode especificar apenas as barras de rolagem x ou y: overflow-x: autoe overflow-y: auto).

Hidde
fonte
5
Observe que o estouro-y só funciona se você especificarmax-height
Preto /
1
overflow-y não precisa de altura máxima. Eu nunca usei max-height com overflow-y e funcionou sempre.
Sumafu 18/01/19
1
@ Sumafu, pode ser necessário, dependendo do caso, como pude experimentar agora.
David
1
Você precisaria heightou max-heightdefiniria se estiver usando absoluteou fixedposicionando no elemento overflow, pois isso impede que o elemento seja redimensionado com base nos limites da página ou da porta de visualização.
Scott Schupbach
15

tente isto:

<div style='overflow:auto; width:400px;height:400px;'>here is some text</div>
kleinohad
fonte
7

experimentar

<div style='overflow:auto; width:400px;height:400px;'>here is some text</div>
pbaris
fonte
6

experimentar 

<div id="boxscroll2" style="overflow: auto; position: relative;" tabindex="5001">
GrvTyagi
fonte
0

Eu descobri que ainda existe altura do div, quando ele tem texto ou não. Então você pode usar isso para obter melhores resultados.

<div style=" overflow:auto;max-height:300px; max-width:300px;"></div>
Shailendra Kumar
fonte
0

Você pode tentar com um abaixo:

  <div style="width: 100%; height: 100%; overflow-x: visible; overflow-y: scroll;">Text</div>
Papun Sahoo
fonte