Jak mogę automatycznie dodać pionowy pasek przewijania do mojego elementu DIV?

Chcę dodać pionowy pasek przewijania do mojego <div>. Próbowałem overflow: auto, ale to nie działa. Przetestowałem swój kod w przeglądarkach Firefox i Chrome.

Wklejam tutaj kod stylu div:

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

Musisz przypisać pewną wysokość, aby overflow: auto;nieruchomość działała.
W celu testowania dodaj height: 100px;i sprawdź.
a także lepiej będzie, jeśli dasz overflow-y:auto;zamiast overflow: auto;, ponieważ to sprawia, że ​​element przewija się tylko w pionie, ale nie w poziomie.

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

Jeśli nie znasz wysokości kontenera i chcesz wyświetlić pionowy pasek przewijania, gdy kontener osiągnie stałą wysokość, powiedz 100px, użyj max-heightzamiast heightproperty.

Aby uzyskać więcej informacji, przeczytaj ten artykuł w MDN .

Musisz dodać max-heightnieruchomość.

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

Możesz ustawić:

overflow-y: scroll;height: XX px

Mam niesamowitą przewijarkę div-popup. Aby zastosować, dodaj ten styl do elementu div:

overflow-y: scroll;
height: XXXpx;

Określona przez heightCiebie będzie wysokość elementu div, a jeśli masz zawartość przekraczającą tę wysokość, musisz go przewinąć.

Dziękuję Ci.

Aby wyświetlić pionowy pasek przewijania w swoim div, musisz dodać

height: 100px;   
overflow-y : scroll;

lub

height: 100px; 
overflow-y : auto;

Nie jestem do końca pewien, do czego próbujesz użyć elementu div, ale jest to przykład z przypadkowym tekstem.

Mr_Green podał prawidłowe instrukcje, gdy powiedział, aby dodać, overflow-y: autoponieważ ogranicza to do przewijania w pionie. To jest przykład JSFiddle:

JSFiddle