Faire défiler un div verticalement à l'aide de CSS

Question

Ce site

<div id="" style="overflow:scroll; height:400px;">

donne un div que l'utilisateur peut faire défiler à la fois horizontalement et verticalement. Comment puis-je le modifier pour que la div soit uniquement défilant verticalement ?

Answer 1

Vous avez tout prévu, à part l'utilisation de la mauvaise propriété. La barre de défilement peut être déclenchée par n'importe quelle propriété. overflow , overflow-x ou overflow-y et chacun d'eux peut être réglé sur l'un des éléments suivants visible , hidden , scroll , auto ou inherit . Vous êtes actuellement en train de regarder ces deux-là :

• auto - Cette valeur tiendra compte de la largeur et de la hauteur de la boîte. Si elles sont définies, la boîte ne s'étendra pas au-delà de ces limites. Au lieu de cela (si le contenu dépasse ces limites), il créera une barre de défilement pour chaque limite (ou les deux) qui dépasse sa longueur.

• scroll - Ces valeurs forces une barre de défilement, quoi qu'il arrive, même si le contenu ne dépasse pas la limite fixée. Si le contenu n'a pas besoin d'être défilé, la barre apparaîtra comme "désactivée" ou non interactive.

Si vous toujours pour que la barre de défilement verticale apparaisse :

Vous devez utiliser overflow-y: scroll . Ce site forces une barre de défilement qui apparaît pour l'axe vertical, qu'elle soit nécessaire ou non. Si vous ne pouvez pas faire défiler le contexte, elle apparaîtra comme une barre de défilement "désactivée".

Si vous voulez qu'une barre de défilement apparaisse uniquement si vous pouvez faire défiler la boîte :

Il suffit d'utiliser overflow: auto . Étant donné que, par défaut, votre contenu passe à la ligne suivante lorsqu'il ne tient pas sur la ligne en cours, une barre de défilement horizontale ne sera pas créée (à moins qu'elle ne se trouve sur un élément pour lequel le retour à la ligne est désactivé). Pour ce qui est de la barre verticale, elle permettra au contenu de s'étendre jusqu'à la hauteur que vous avez spécifiée. S'il dépasse cette hauteur, il affichera une barre de défilement verticale pour visualiser le reste du contenu, mais n'affichera pas de barre de défilement s'il ne dépasse pas la hauteur.

Answer 2

Essayez comme ça.

<div style="overflow-y: scroll; height:400px;">

Answer 3

Pour une hauteur de fenêtre de 100%, utilisez :

overflow: auto;
max-height: 100vh;

Answer 4

Utilisez overflow-y: auto; sur le div.

Vous devez également définir la largeur.

Answer 5

Vous pouvez utiliser ce code à la place.

<div id="" style="overflow-y:scroll; overflow-x:hidden; height:400px;">

débordement-x : La propriété overflow-x spécifie ce qu'il faut faire avec les bords gauche/droit du contenu - s'il déborde de la zone de contenu de l'élément.
débordement-y : La propriété overflow-y spécifie ce qu'il faut faire avec les bords supérieurs et inférieurs du contenu - s'il déborde de la zone de contenu de l'élément.

Valeurs
visible : Valeur par défaut. Le contenu n'est pas coupé, et il peut être rendu en dehors de la boîte de contenu.
caché : Le contenu est coupé - et aucun mécanisme de défilement n'est prévu.
défilement : Le contenu est écrêté et un mécanisme de défilement est prévu.
auto : Devrait entraîner la mise en place d'un mécanisme de défilement pour les boîtes qui débordent.
initial : Définit cette propriété à sa valeur par défaut.
hériter de Hérite de cette propriété de son élément parent.