CSS masquer la barre de défilement si non nécessaire

436

J'essaie de comprendre comment je peux cacher le overflow-y:scroll;si ce n'est pas nécessaire. Ce que je veux dire, c'est que je construis un site Web et j'ai une zone principale où les messages seront affichés et je veux masquer la barre de défilement si le contenu ne dépasse pas la largeur actuelle.

Aussi, ma deuxième question. Je veux faire en sorte que lorsque les messages dépassent la largeur actuelle, la largeur augmentera automatiquement et le contenu ne sortira pas de la boîte.

Quelqu'un a-t-il une idée de la façon de procéder?

Zone des messages:

.content {
    height: 600px;
    border-left: 1px solid;
    border-right: 1px solid;
    border-bottom: 1px solid;
    font-size: 15px;
    text-align: justify;
    line-height: 19px;
    overflow-y:scroll;
}

Conteneur du site Web principal:

.container {
    margin: 0 auto;
    width: 757px;
    margin-top: 30px;
    text-align: center;
}

html css

— Thanos Paravantis
source

Voulez-vous masquer la barre de défilement verticale ou horizontale? Pouvez-vous publier l'exemple avec du code html sur, par exemple, jsfiddle.net et le lier ici

— RJo

Bonjour, j'ai posté les 2 cours que j'utilise. Sur le html, rien que d'appeler des classes.

— Thanos Paravantis du

745

Définissez la overflow-ypropriété sur autoou supprimez la propriété si elle n'est pas héritée.

— RJo
source

Je pourrais mais j'ai besoin d'aide avec ma deuxième question aussi, sur la largeur, l'augmentation automatique.

— Thanos Paravantis

Vous pouvez toujours essayer d'utiliser la recherche stackoverflow

— RJo

Où est scroll dans vos exemples?

— Vert

13

Lors de la définition de overflow-y: automon problème résolu - le lien ne montre pas réellement un exemple de cela ...

— Shadow

2

À noter que cela overflow-x: autofonctionne également pour masquer les barres de défilement horizontales.

— Edward D'Souza

40

Vous pouvez utiliser overflow:auto;

Vous pouvez également contrôler l'axe x ou y individuellement avec les propriétés overflow-xet overflow-y.

Exemple:

.content {overflow:auto;}
.content {overflow-y:auto;}
.content {overflow-x:auto;}

— Ayyappan K
source

20

Bien que nous vous remercions pour votre réponse, il serait préférable qu'elle apporte une valeur supplémentaire en plus des autres réponses. Dans ce cas, votre réponse n'apporte aucune valeur supplémentaire, car un autre utilisateur a déjà publié cette solution. Si une réponse précédente vous a été utile, vous devriez voter contre au lieu de répéter les mêmes informations.

— Toby Speight

9

Vous pouvez utiliser à la fois .content et .container pour déborder: auto. Signifie que si son texte est dépassé automatiquement, le défilement viendra sur l'axe x et l'axe y. (pas besoin de donner un axe x séparé et un axe y donnent généralement un débordement: auto)

.content {overflow: auto;}

— Ayyappan K
source

5

.selected-elementClass{
    overflow-y:auto;
}

— Prateek Arora
source

1

.container {overflow: auto;} fera l'affaire. Si vous souhaitez contrôler une direction spécifique, vous devez définir auto pour cet axe spécifique. AE

.container {overflow-y: auto;} .container {overflow-x: hidden;}

Le code ci-dessus masquera tout débordement sur l'axe des x et générera une barre de défilement si nécessaire sur l'axe des y. Mais vous devez vous assurer que votre contenu par défaut est plus petit que la hauteur du conteneur; sinon, la barre de défilement ne sera pas masquée.

— Neero
source