Faire défiler verticalement un div à L'aide de CSS
Ce
<div id="" style="overflow:scroll; height:400px;">Donne div, que l'utilisateur peut faire défiler horizontalement et verticalement. Comment puis-je le changer pour que le div soit seulement défilant verticalement?
7 réponses
Vous l'avez couvert en dehors de l'utilisation de la mauvaise propriété. La barre de défilement peut être déclenché par n'importe quelle propriété overflow, overflow-x, ou overflow-y et chacune peut être définie comme visible, hidden, scroll, auto, ou inherit. Vous regardez actuellement ces deux:
auto- Cette valeur permettra de regarder la largeur et la hauteur de la boîte. Si elles sont définies, cela ne laissera pas la boîte s'étendre 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 limite (ou les deux) qui dépasse sa longueur.scroll- Cette valeur Force une barre de défilement, quoi qu'il arrive, même si le contenu ne dépasse pas le jeu de limites. 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 voulez que la barre de défilement verticale à apparaître:
Vous devriez utiliser overflow-y: scroll. Ceci Force une barre de défilement à apparaître pour l'axe vertical si oui ou non il est nécessaire. Si vous ne pouvez pas réellement faire défiler le contexte, il apparaîtra comme une barre de défilement"désactivée".
Si vous voulez seulement une barre de défilement apparaissent que si vous pouvez faire défiler la boîte:
Utilisez simplement overflow: auto. Puisque votre contenu par défaut passe à la ligne suivante lorsqu'il ne peut pas tenir sur la ligne en cours, une barre de défilement horizontale ne sera pas créée (sauf si elle est sur un élément désactivé). Pour la barre verticale, cela permettra au contenu de s'étendre jusqu'à la hauteur que vous avez spécifié. Si elle dépasse cette hauteur, elle affichera une barre de défilement verticale pour afficher le reste du contenu, mais n'affichera pas de barre de défilement si elle ne dépasse pas la hauteur.
Essayez comme ceci.
<div style="overflow-y: scroll; height:400px;">Pour 100% Hauteur de la fenêtre utiliser:
overflow: auto;
max-height: 100vh;
Utilisez overflow-y: auto; sur le div.
En outre, vous devriez également définir la largeur.
Vous pouvez utiliser ce code à la place.
<div id="" style="overflow-y:scroll; overflow-x:hidden; height:400px;">
overflow-x : la propriété overflow-x spécifie ce qu'il faut faire avec les bords gauche/droit du contenu - si elle déborde la zone de contenu de l'élément.
overflow-y : la propriété overflow-y spécifie ce qu'il faut faire avec les bords supérieur/inférieur du contenu - si elle déborde la zone de contenu de l'élément.
Les valeurs
visible: valeur par Défaut. Le contenu n'est pas coupé, et il peut être rendu à l'extérieur le contenu de la boîte.
hidden : le contenu est coupé - et aucun mécanisme de défilement n'est fourni.
faites défiler: Le contenu est coupé et un mécanisme de défilement est fourni.
auto : devrait provoquer un mécanisme de défilement pour les boîtes débordantes.
initiale: Définit cette propriété à sa valeur par défaut.
hériter Hérite de cette propriété à partir de son élément parent.
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>Le problème avec toutes ces réponses pour moi était qu'elles n'étaient pas réactives. Je devais avoir une hauteur fixe pour une div parent que je ne voulais pas. Je ne voulais pas non plus passer une tonne de temps à discuter avec les requêtes des médias. Si vous utilisez angular, vous pouvez utiliser bootstraps tabset et il fera tout le travail pour vous. Vous serez en mesure de faire défiler le contenu interne et il sera réactif. Lorsque vous configurez l'onglet, faites comme ceci: $scope.tab = { title: '', url: '', theclass: '', ative: true }; ... le fait est que vous ne voulez pas de titre ou d'image icône. puis masquer le contour de l'onglet dans cs comme ceci:
.nav-tabs {
border-bottom:none;
}
, Et aussi ce .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {border:none;}
et enfin pour supprimer l'onglet invisible sur lequel vous pouvez toujours cliquer Si vous n'implémentez pas ceci: .nav > li > a {padding:0px;margin:0px;}