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
la 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

Réponses:

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
la 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
la source
7

essayer

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

essayer 

<div id="boxscroll2" style="overflow: auto; position: relative;" tabindex="5001">
GrvTyagi
la 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
la 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
la source