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

110

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;
css html scrollbar overflow sójka
źródło
jsfiddle lub więcej css ze znacznikami
Ritabrata Gautam
12
Spróbuj tego: overflow-y:scrolli trochę wysokości . Przejrzyj te dokumenty .
Mr_Green
Dzięki Mr_Green za twoją odpowiedź. Ale ten kod nie działa dla mnie.
jay
Aby Scroll działał, zawartość wewnętrzna powinna się przepełnić .
Mr_Green
Opublikuj tutaj swój kod HTML i CSS.
Mr_Green

Odpowiedzi:

145

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 .

Pan Zielony
źródło
Tak, zrozumiałem i przetestowałem, działa dobrze w Chrome, ale nie w FireFox. Jeszcze jedną mylącą rzeczą jest to, że pionowy pasek przewijania pojawia się na Czas ładowania strony w FF, ale znika po zakończeniu ładowania strony!
jay
"Musisz przypisać trochę wzrostu" dokładnie mój problem, dzięki! : P
Wagner da Silva
51

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>
Rozwiń fragment

DevT
źródło
20

Możesz ustawić:

overflow-y: scroll;height: XX px

źródło
2
zostało to zasugerowane w poprzednich odpowiedziach.
UmNyobe,
15

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.

Ataboy Josef
źródło
13

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

height: 100px;   
overflow-y : scroll;

lub

height: 100px; 
overflow-y : auto;
Ricardo Romo
źródło
10

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

MitulP91
źródło
Przede wszystkim @Mr_Green Twoja sugestia działa dobrze w Chrome, ale nie w FF. I czy jest jakaś alternatywa dodania Height, ponieważ nie mogę dodać Height do mojego Div dla mojej struktury projektu.
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);
}
Rozwiń fragment

GURU PRASAD
źródło
2
Dodaj wyjaśnienie do swojej odpowiedzi
Mastisa
wydaje się, że źródłem (i wyjaśnieniem) jest: simurai.com/blog/2011/07/26/webkit-scrollbar .
cobberboy