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

Ich möchte meinem eine vertikale Bildlaufleiste hinzufügen <div>. ich habe es versucht overflow: auto, aber es funktioniert nicht. Ich habe meinen Code in Firefox und Chrome getestet.

Ich füge den Code im div-Stil hier ein:

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

Sie müssen eine gewisse Höhe zuweisen, um das zu machen overflow: auto; Eigentumsarbeit.

Fügen Sie zu Testzwecken hinzu height: 100px; und prüfe.

und es wird auch besser sein, wenn du gibst overflow-y:auto; Anstatt von overflow: auto;da das Element dadurch nur vertikal, aber nicht horizontal scrollt.

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

Wenn Sie die Höhe des Containers nicht kennen und eine vertikale Bildlaufleiste anzeigen möchten, wenn der Container eine feste Höhe erreicht, sagen Sie 100pxverwenden max-height Anstatt von height Eigentum.

Weitere Informationen finden Sie hier MDN-Artikel.

Sie müssen hinzufügen max-height Eigentum.

.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>

Ich habe einen erstaunlichen Scroller auf meinem div-popup. Fügen Sie zum Anwenden diesen Stil zu Ihrem div-Element hinzu:

overflow-y: scroll;
height: XXXpx;

Das height Sie geben die Höhe des div an und sobald Sie Inhalte haben, die diese Höhe überschreiten, müssen Sie sie scrollen.

Vielen Dank.

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

height: 100px;   
overflow-y : scroll;

oder

height: 100px; 
overflow-y : auto;

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

Mr_Green gab die richtigen Anweisungen, als er sagte, er solle hinzufügen overflow-y: auto da dies auf vertikales Scrollen beschränkt ist. Dies ist ein JSFiddle-Beispiel:

JSFiddle

Seit OS X Lion ist die Bildlaufleiste auf Websites standardmäßig ausgeblendet und erst sichtbar, wenn Sie mit dem Scrollen beginnen. Persönlich bevorzuge ich die versteckte Bildlaufleiste, aber falls Sie sie wirklich brauchen, können Sie die Standardeinstellung überschreiben und die Bildlaufleiste in WebKit-Browsern wie folgt zurücksetzen:

::-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);
}

In meinem Fall

Automatisch vertikal scrollen

overflow-y: scroll;
overflow-x: hidden;