28112 sujets

CSS et mise en forme, CSS3

Overflow

bonjour
j'ai vraiment du mal à comprendre overflow
imaginons une page comme suit:
<html>
<head>
<style>
body{overflow:auto}
</style>
</head>
<body>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</body>
</html>


que ce soit avec edge, internet explorer, chrome, opera ou firefox:

1:avec overflow:auto j'ai bien ce à quoi je m'attend si ca depasse de l'ecran j'ai un ascenceur, si ca ne depasse pas de l'ecran je ne l'ai plus
2:si je remplace la valeur auto par visible j'ai dans les deux cas les memes resultats qu'avec auto
3:si j'enleve carrement body{overflow:auto} j'ai une nouvelle fois exactement les memes resultats qu'avec auto ou visible
4:si je remplace auto par hidden la les choses changent je n'ai plus l'acenseur ds les deux cas
5:si je remplace auto par scroll ca change aussi, j'ai l'acenseur ds les deux cas

en dehors des cas 4 et 5 à quoi sert de mettre un oveflow? et y a t-il une difference au final entre visible, auto ou ne rien mettre?
merci
Modifié par nantais (17 Feb 2018 - 14:04)
Modérateur
Bonjour,

alors en effet c'est un peu complexe. (pas overflow mais ce cas de figure).

Premièrement au dessus de body il y a HTML, et au dessus il y a le viewport. Le viewport peut être vu grosso-modo comme la fenêtre d'affichage. C'est par défaut sur le viewport que l'ascenseur se trouve. Pour des raison historiques, comme le viewport n'était pas ciblable en CSS, certaines propriétés CSS qu'on applique à body s'appliquent en réalité au viewport. C'est le cas de overflow, ou background-color.

Maintenant regardons ce que l'on peut appliquer à ce viewport:

1) overflow: auto C'est en effet la valeur par défaut
2) overflow: visible n'a pas de sens sur le viewport, car ceci ferait sortir l'élément de la fenêtre du navigateur, ce qui n'a techniquement pas de sens et n'est pas autorisé par l'OS généralement, donc cette règle est ignorée.
3) overflow: hidden cache bien l'ascenseur
4) overflow scroll montre bien l'ascenseur, même quand celui-ci n'est pas nécessaire.
Modifié par kustolovic (17 Feb 2018 - 12:06)
merci pour ta reponse
en mettant l'overflow sur le html c'est exactement pareil
en tous cas tous cas est vraiment etrange, on se demande a quoi serve auto, visible puisqu'ils font la meme chose avec tous les navigateurs et que ne rien mettre fait aussi la meme chose
pour moi il y a un vrai mystere la dedans
Modérateur
Oui pour html cela se produit comme pour body: cela cible le viewport.

Sinon les différentes valeurs sont plus pertinentes pour les autres éléments:

https://codepen.io/anon/pen/bLajpZ

(à noter que selon l'OS et le navigateur, le dernier n'aura aucun effet visible)
d'accord merci, je vois, tres different si sur html,body et autre element

sinon quelle est la bonne methode pour cacher la scrollbar pour les telephones par exemple ou l'on defile de facon tactile

pour l'instant jutilise ca
body::-webkit-scrollbar{width:0}

mais je vois ici que c'est moyen https://developer.mozilla.org/fr/docs/Web/CSS/::-webkit-scrollbar
que peut-on utiliser d'autre?
un overflow hidden masque la barre mais empeche aussi de defiler la page
Modifié par nantais (23 Feb 2018 - 09:44)
Sujet clos
Aller à