Pokazuje pionowy pasek przewijania Div


87

Zastanawiam się, jak można na stałe wyświetlić pionowy pasek elementu div (wyszarzony, jeśli nie ma przewijania), podobny do naszych zwykłych słupków. Zasadniczo staram się umieścić całą witrynę w div (jak gmail / facebook), więc jeśli strona nie jest wystarczająco długa, cała strona przesuwa się z powodu braku pionowego paska przewijania.

Potrzebuję rozwiązania tego problemu. Próbowałem overflow-y: scroll. Ale wydaje się, że w ogóle nie działa.

Odpowiedzi:


182

W jakiej przeglądarce testujesz?

Jaki DOCType ustawiłeś?

Jak dokładnie deklarujesz swój CSS?

Czy na pewno nie przegapiłeś ;przed / po overflow-y: scroll?

Właśnie przetestowałem następujące elementy w IE7 i Firefox i działa dobrze

<!-- Scroll bar present but disabled when less content -->
<div style="width: 200px; height: 100px; overflow-y: scroll;">
  test
</div>

<!-- Scroll bar present and enabled when more contents -->        
<div style="width: 200px; height: 100px; overflow-y: scroll;">
  test<br />
  test<br />
  test<br />
  test<br />
  test<br />
  test<br />
  test<br />
  test<br />
  test<br />
  test<br />
</div>


Przetestowany również w IE7 i FireFox, i działa tylko <div style = "overflow-y: scrol"> Witaj </div>.
Staale

1
to jest arkusz stylów, którego używam: #main_container {width: 100%; background-color: #eeeeee; overflow-y: scroll; wysokość: 100%; pozycja: bezwzględna; }
Alec Smart

<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN" " w3.org/TR/html4/loose.dtd ">
Alec Smart

och, teraz działa ... dzięki ... przez przypadek umieściłem tag stylu z napisem przepełnienie: auto w div, który nadpisał mój zewnętrzny css ...
Alec Smart

30

Czy próbowałeś overflow-y:auto? Nie jest to dokładnie to, czego chcesz, ponieważ pasek przewijania pojawi się tylko wtedy, gdy będzie potrzebny.


29

Zawsze: jeśli chcesz zawsze używać pionowego paska przewijania, użyjoverflow-y: scroll;

jsFiddle:

<div style="overflow-y: scroll;">
......
</div>

W razie potrzeby : jeśli chcesz, aby pionowy pasek przewijania był potrzebny tylko wtedy, gdy jest to potrzebne, użyj opcji overflow-y: auto;(w tym przypadku musisz określić wysokość)

jsFiddle:

<div style="overflow-y: auto; height:150px; ">
....
</div>
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.