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

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