it-swarm.com.de

Wie kann ich meinem Div automatisch eine vertikale Bildlaufleiste hinzufügen?

Ich möchte meinem <Div> Eine vertikale Bildlaufleiste hinzufügen. Ich habe versucht overflow:auto, Aber es funktioniert nicht. Ich habe meinen Code in Firefox und Chrome getestet. Ich füge den Div-Style-Code hier ein:

float:left;
width:1000px;
overflow: auto;
90
jay

Sie müssen eine gewisse Höhe zuweisen, um die overflow: auto; Eigenschaft Arbeit.
Fügen Sie zu Testzwecken height: 100px; und prüfe.
und es wird auch besser sein, wenn Sie overflow-y:auto; anstatt overflow: auto;, weil dadurch das Element nur vertikal, nicht jedoch horizontal gescrollt wird.

float:left;
width:1000px;
overflow-y: auto;
height: 100px;

Wenn Sie die Höhe des Containers nicht kennen und die vertikale Bildlaufleiste anzeigen möchten, wenn der Container eine feste Höhe erreicht, sagen Sie 100px, verwenden max-height anstelle der Eigenschaft height.

Weitere Informationen finden Sie in diesem MDN-Artikel .

122
Mr_Green

Sie müssen die Eigenschaft max-height Hinzufügen.

.ScrollStyle
{
    max-height: 150px;
    overflow-y: scroll;
}
<div class="ScrollStyle">
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
</div>
42
DevT

Sie können einstellen:

overflow-y: scroll;height: XX px
14
user5650798

Ich habe einen tollen Scroller auf meinem div-popup. Zum Anwenden fügen Sie Ihrem div-Element diesen Stil hinzu:

overflow-y: scroll;
height: XXXpx;

Das height, das Sie angeben, ist die Höhe des Div. Wenn Sie Inhalte haben, die diese Höhe überschreiten, müssen Sie einen Bildlauf durchführen.

Danke.

12
Ataboy Josef

Ich bin nicht ganz sicher, wofür Sie das div verwenden wollen, aber dies ist ein Beispiel mit zufälligem Text.

Mr_Green gab die richtigen Anweisungen, als er sagte, er solle overflow-y: auto Hinzufügen, da dies das vertikale Scrollen einschränke. Dies ist ein JSFiddle-Beispiel:

JSFiddle

9
MitulP91

Um die vertikale Bildlaufleiste in Ihrem div anzuzeigen, müssen Sie hinzufügen

height: 100px;   
overflow-y : scroll;

oder

height: 100px; 
overflow-y : auto;
8
Ricardo Romo
::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
2
GURU PRASAD