Rendre un div à défilement vertical est facile en utilisant la propriété de débordement CSS. Il existe différentes valeurs dans propriété de débordement . Nous pouvons utiliser cette propriété pour obtenir une barre de défilement sur une page Web. Les exemples mentionnés ci-dessous montrent comment définir une barre de défilement verticale sur une page Web.

Exemple 1: Dans cet exemple, nous avons défini overflow-x: Hidden; et overflow-y : auto ; qui masquera automatiquement la barre de défilement horizontale et présentera uniquement la barre de défilement verticale.

HTML

> <> html> >> <> head> >> > <> style> >> > h1 {> > color: Green;> > }> > div.scroll {> > margin: 4px, 4px;> > padding: 4px;> > background-color: green;> > width: 500px;> > height: 110px;> > overflow-x: hidden;> > overflow-y: auto;> > text-align: justify;> > }> > style>tête>

`techcodeview.comh1>`
C'est une bonne plateforme pour apprendre la programmation. Il s'agit d'un site Web éducatif. Préparez-vous à la campagne de recrutement d'entreprises basées sur des produits comme Microsoft, Amazon, Adobe, etc. avec un cours gratuit de préparation au placement en ligne. Le cours se concentre sur diverses questions de QCM et de codage susceptibles d'être posées lors des entretiens et rend votre prochaine saison de placement efficace et réussie. De plus, tous les geeks peuvent aider d'autres geeks en écrivant des articles sur techcodeview.com, la publication d'articles suit quelques étapes qui sont les articles qui nécessitent peu de modifications/améliorations de la part des réviseurs et sont publiés en premier. Pour faire réviser rapidement vos articles, veuillez vous référer aux articles existants, à leur style de formatage, à leur style de codage et essayez de vous en rapprocher. Si vous êtes débutant, vous pouvez consulter les directives pour rédiger un article div> center> body> html>>

Sortir:

Sortir

Exemple 2 : Dans cet exemple, utilisez auto à la place de overflow-x:hidden; et débordement-y:auto; pour rendre div défilable verticalement.

HTML

> <> html> >> <> head> >> > <> style> >> > h1 {> > color: Green;> > }> > div.gfg {> > margin: 5px;> > padding: 5px;> > background-color: green;> > width: 500px;> > height: 110px;> > overflow: auto;> > text-align: justify;> > }> > style>tête>