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 pouvez utiliser overflow-y: scroll pour le défilement vertical.

<div  style="overflow-y:scroll; height:400px; background:gray">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

 </div>

Answer 2

Le problème avec toutes ces réponses pour moi, c'est qu'elles n'étaient pas réactives. J'étais obligé d'avoir une hauteur fixe pour une div parent, ce que je ne voulais pas. Je ne voulais pas non plus passer une tonne de temps à bricoler des media queries. Si vous utilisez angular, vous pouvez utiliser bootstraps tabset et il fera tout le travail pour vous. Vous pourrez faire défiler le contenu interne et il sera réactif. Lorsque vous configurez l'onglet, procédez comme suit : $scope.tab = { title: '', url: '', theclass: '', ative: true }; ... le fait est que vous ne voulez pas de titre ou d'icône d'image. alors cachez le contour de l'onglet dans cs comme ceci :

.nav-tabs {
   border-bottom:none; 
} 

et aussi ceci .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {border:none;} et enfin de supprimer l'onglet invisible sur lequel vous pouvez toujours cliquer si vous n'implémentez pas cette mesure : .nav > li > a {padding:0px;margin:0px;}

Answer 3

Les réponses ci-dessus ont donné de bonnes explications à la moitié de la question. Pour l'autre moitié.

Pourquoi ne pas simplement cacher la barre de défilement elle-même. De cette façon, il sera plus attrayant, car la plupart des gens (y compris moi) détestent la barre de défilement. Vous pouvez utiliser ce code

::-webkit-scrollbar {
    width: 0px;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}