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

110

Ich möchte eine vertikale Bildlaufleiste zu meiner 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 hier den div-Style-Code ein:

float: left;
width: 1000px;
overflow: auto;
css html scrollbar overflow Jay
quelle
eine jsfiddle oder mehr CSS mit Ihrem Markup
Ritabrata Gautam
12
Versuchen Sie dies: overflow-y:scrollund etwas Höhe . Gehen Sie diese Dokumente durch .
Mr_Green
Vielen Dank, Mr_Green, für Ihre Antwort. Aber dieser Code funktioniert bei mir nicht.
Jay
Damit der Bildlauf funktioniert, sollte der interne Inhalt überlaufen .
Mr_Green
Veröffentlichen Sie hier Ihren HTML- und CSS-Code.
Mr_Green

Antworten:

144

Sie müssen eine gewisse Höhe zuweisen, damit die overflow: auto;Eigenschaft funktioniert.
Fügen Sie zu Testzwecken hinzu height: 100px;und überprüfen Sie.
und auch wird es besser sein , wenn Sie geben overflow-y:auto;statt overflow: auto;, weil dies das Element macht nur vertikal zu bewegen , aber nicht horizontal.

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 100px, verwenden Sie max-heightstattdessen anstelle vonheight Eigenschaft.

Weitere Informationen finden Sie in diesem MDN-Artikel .

Herr Green
quelle
Ja, ich habe verstanden und getestet, es funktioniert gut in Chrome, aber nicht in FireFox. Eine weitere verwirrende Sache ist, dass die vertikale Bildlaufleiste beim Laden der Seite in FF angezeigt wird, aber nach Abschluss des Ladens der Seite verschwindet!
Jay
"Sie müssen etwas Höhe zuweisen" genau mein Problem, danke! : P
Wagner da Silva
51

Sie müssen eine max-heightEigenschaft 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>
Erweitern Sie das Snippet

DevT
quelle
20

Sie können einstellen:

overflow-y: scroll;height: XX px

quelle
2
Dies wurde durch frühere Antworten vorgeschlagen.
UmNyobe
14

Ich habe einen erstaunlichen Scroller auf meinem div-popup. Fügen Sie diesen Stil Ihrem div-Element hinzu, um ihn anzuwenden:

overflow-y: scroll;
height: XXXpx;

Das von heightIhnen angegebene ist die Höhe des Div. Wenn der Inhalt diese Höhe überschreitet, müssen Sie ihn scrollen.

Danke dir.

Ataboy Josef
quelle
13

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

height: 100px;   
overflow-y : scroll;

oder

height: 100px; 
overflow-y : auto;
Ricardo Romo
quelle
10

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

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

JSFiddle

MitulP91
quelle
Zunächst einmal @Mr_Green Ihr Vorschlag funktioniert gut in Chrome, aber nicht in FF. Und gibt es eine Alternative zum Hinzufügen von Höhe, weil ich meiner Div für meine Designstruktur keine Höhe hinzufügen kann?
Jay
2 

::-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);
}
Erweitern Sie das Snippet

GURU PRASAD
quelle
2
Bitte fügen Sie Erklärung zu Ihrer Antwort hinzu
Mastisa
Die Quelle (und Erklärung) scheint zu sein: simurai.com/blog/2011/07/26/webkit-scrollbar .
Cobberboy