Comment rendre la barre de défilement sur un div visible uniquement lorsque cela est nécessaire?

151

J'ai ce div:

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

Les barres de défilement sont toujours visibles, même si le texte ne déborde pas. Je souhaite que les barres de défilement ne soient visibles que lorsque cela est nécessaire, c'est-à-dire uniquement lorsque la zone contient suffisamment de texte pour qu'elles soient nécessaires. Comme le fait une zone de texte. Comment puis-je faire cela? Ou est ma seule option pour styliser une zone de texte pour qu'elle ressemble à un div?

css html scrollbar

— Benubird
source

Et ça. Affiche uniquement la barre de défilement lorsqu'elle est survolée. Je ne sais pas si cela vous est utile. stackoverflow.com/questions/7125185/…

— Ryan Beaulieu

codepen.io/anon/pen/QwLeMG J'espère que cela peut vous aider

— vishalkin

overflow: auto;ne fonctionne pas sur Android :-(

— aioobe

313

Utilisez overflow: auto. Les barres de défilement n'apparaîtront qu'en cas de besoin.

(Sidenote, vous pouvez également spécifier uniquement la barre de défilement x ou y: overflow-x: autoet overflow-y: auto).

— Hidde
source

5

Notez que overflow-y ne fonctionne que si vous spécifiezmax-height

— Black

1

overflow-y n'a pas besoin de hauteur maximale. Je n'ai jamais utilisé max-height avec overflow-y et cela fonctionnait à chaque fois.

— Sumafu

1

@Sumafu vous en aurez peut-être besoin selon le cas, comme je pourrais en faire l'expérience maintenant.

— David

1

Vous devez heightou max-heightdéfinir si vous utilisez absoluteou fixedpositionnez sur l'élément de débordement, car ils empêchent l'élément de se redimensionner en fonction des limites de la page ou de la fenêtre.

— Scott Schupbach

15

essaye ça:

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

— kleinohad
source

7

essayer

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

— pbaris
source

6

essayer

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

— GrvTyagi
source

0

J'ai trouvé que la hauteur de la div est toujours affichée, qu'elle contient du texte ou non. Vous pouvez donc l'utiliser pour de meilleurs résultats.

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

— Shailendra Kumar
source

0

Vous pouvez essayer avec ci-dessous un:

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

— Papun Sahoo
source