Vertikale Scrollbarkeit eines Divs mit CSS

Question

Diese

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

gibt eine div dass der Benutzer sowohl horizontal als auch vertikal blättern kann. Wie ändere ich es so, dass die div ist nur vertikal verschiebbar?

Answer 1

Sie haben alles im Griff, abgesehen von der Verwendung der falschen Eigenschaft. Die Bildlaufleiste kann mit jeder Eigenschaft ausgelöst werden overflow , overflow-x o overflow-y und kann jeweils auf eine der folgenden Optionen gesetzt werden visible , hidden , scroll , auto o inherit . Sie schauen sich gerade diese beiden an:

• auto - Dieser Wert bezieht sich auf die Breite und Höhe des Feldes. Wenn sie definiert sind, wird der Rahmen nicht über diese Grenzen hinaus erweitert. Stattdessen wird (wenn der Inhalt diese Grenzen überschreitet) eine Bildlaufleiste für eine der beiden Grenzen (oder beide) erstellt, die ihre Länge überschreitet.

• scroll - Diese Werte Kräfte eine Bildlaufleiste, auch wenn der Inhalt die festgelegte Grenze nicht überschreitet. Wenn der Inhalt nicht gescrollt werden muss, wird die Leiste als "deaktiviert" oder nicht interaktiv angezeigt.

Wenn Sie siempre die vertikale Bildlaufleiste erscheinen soll:

Sie sollten Folgendes verwenden overflow-y: scroll . Diese Kräfte eine Bildlaufleiste für die vertikale Achse einblenden, unabhängig davon, ob sie benötigt wird oder nicht. Wenn Sie den Kontext nicht scrollen können, wird die Bildlaufleiste als "deaktiviert" angezeigt.

Wenn Sie möchten, dass eine Bildlaufleiste nur dann erscheint, wenn Sie das Feld verschieben können:

Verwenden Sie einfach overflow: auto . Da Ihr Inhalt standardmäßig einfach in die nächste Zeile umbricht, wenn er nicht in die aktuelle Zeile passt, wird keine horizontale Bildlaufleiste erstellt (es sei denn, sie befindet sich auf einem Element, bei dem der Zeilenumbruch deaktiviert ist). Bei der vertikalen Leiste kann sich der Inhalt bis zu der von Ihnen angegebenen Höhe ausdehnen. Wenn er diese Höhe überschreitet, wird eine vertikale Bildlaufleiste eingeblendet, um den Rest des Inhalts anzuzeigen.

Answer 2

Versuchen Sie es so.

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

Answer 3

Für 100 % Ansichtsfensterhöhe verwenden:

overflow: auto;
max-height: 100vh;

Answer 4

Utilisez overflow-y: auto; auf der div.

Außerdem sollten Sie auch die Breite einstellen.

Answer 5

Sie können stattdessen diesen Code verwenden.

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

Überlauf-x : Die Eigenschaft overflow-x gibt an, was mit den linken/rechten Rändern des Inhalts geschehen soll, wenn dieser den Inhaltsbereich des Elements überschreitet.
Überlauf-y : Die Eigenschaft overflow-y gibt an, was mit den oberen/unteren Rändern des Inhalts geschehen soll, wenn dieser über den Inhaltsbereich des Elements hinausgeht.

Werte
sichtbar : Standardwert. Der Inhalt wird nicht beschnitten und kann außerhalb des Inhaltsrahmens wiedergegeben werden.
versteckt : Der Inhalt wird abgeschnitten - und es ist kein Bildlaufmechanismus vorgesehen.
Blättern Sie : Der Inhalt wird beschnitten und ein Bildlaufmechanismus ist vorhanden.
Auto : Sollte dazu führen, dass ein Bildlaufmechanismus für überlaufende Boxen vorgesehen wird.
anfänglich : Setzt diese Eigenschaft auf ihren Standardwert.
erben Vererbt diese Eigenschaft von seinem übergeordneten Element.