Jak dodać pasek przewijania (scroll) CSS – overflow

Czas czytania: 4 minut

Czasami zdarza, się że zawartość kontenera (np. <div>) na stronie jest znacznie większa niż sam kontener. Treść, grafika lub inne element, które chcemy w nim umieścić się po prostu nie mieszczą.

Wynika to z zbyt małej szerokość i/lub wysokości by pomieścić całą zawartość. W efekcie wszystko się deformuje i nie wygląda za ładnie. Zbyt mała przestrzeń na zawartość może być w praktyce działaniem celowym np. na stronach RWD lub kiedy robimy pop pup i nie chcemy by zajmował dużo miejsca. W takiej sytuacji przyda nam się właściwość CSS overflow.

Co robi właściwość CSS overflow?

Z pomocą właściwości overflow można uzyskać różnego typu rozwiązania tego problemu. Dodaje ona bowiem do kontenera paski przewijania (scroll). Działają one w różnorodny sposób w zależności od tego jaką wartość ustawimy w tej właściwości CSS.

Overflow przyjmuje wartości takie jak:

visiblezawartość po przepełnieniu elementu będzie cała widoczna nakładając się na pozostałe elementy umieszczone na strony.
hiddenukrywa zawartość wychodzącą poza obszar obiektu. Pasek jak przewijania jest wyłączony i nie mamy dostępu do niewidocznej części tekstu
scrollwielkość elementu zawierającego nie ulega zmianie, ale zostają dodane paski przewijania w celu umożliwienia użytkownikowi przewinięcia zawartość.
autoefekt jest podobny, jak w przypadku scroll, ale pasek pojawi się dopiero w momencie gdy obiekt zostanie przepełniony. Przy ustawieniu auto nie posiadamy dolnego paska przewijania.

CiekawostkaWłaściwość ta przydaje się również do uzyskania efektu responsywnych (RWD) tabel na stronach internetowych!

Przykłady zastosowania overflow dla elementów strony

Działanie scroll

Naszą zabawę zaczniemy od przykładu z overflow: scroll

Ten tekst może być dowolnie długi – a nawet musi, aby zobaczyć efekt stylu…

Kod HTML i CSS przykładu

<div style="width: 300px; height: 80px; overflow: scroll; border:1px solid #ccc;">

Ten tekst może być dowolnie długi - a nawet musi, aby zobaczyć efekt stylu...

</div>

Jak widać nasz kontener zyskał pasek przewijania z pomocą, którego możemy przesuwać treść do góry i dołu. Gdybyśmy zastąpili nasz tekst innym kontenerem / tabelą o szerokości przekraczającej nadrzędny obiekt mogli byśmy przesuwać również na boki. Metoda, którą zastosowałam na tabeli często wykorzystywana jest na stronach RWD.

1 tekst 12 tekst 13 tekst 1
4 tekst 15 tekst 16 tekst 1

Kod HTML i CSS z przykładu powyżej

<div style="width: 300px; height: 80px; overflow: scroll; border: 1px solid #ccc;">
<table style="width: 350px;" border="1">
<tbody>
<tr>
<td>1 tekst 1</td>
<td>2 tekst 1</td>
<td>3 tekst 1</td>
</tr>
<tr>
<td>4 tekst 1</td>
<td>5 tekst 1</td>
<td>6 tekst 1</td>
</tr>
</tbody>
</table>
</div>

Działanie – auto

Kolejną wartością jest auto tak jak napisałam powyżej auto zadziała dopiero gdy przekroczymy wielkość naszego kontenera:

overflow: auto;

Ten tekst może być dowolnie długi – a nawet musi, aby zobaczyć efekt stylu…

Jak widać nasz tekst nie uzyskał żadnych dodatkowych pasków. Jednak tabela już tak.

1 tekst 12 tekst 13 tekst 1
4 tekst 15 tekst 16 tekst 1

Działanie – hidden (ukrywanie)

Przy zastosowaniu hidden wszystkie elementy, które są większe niż zewnętrzny kontener zostaną przycięte do rozmiaru kontenera.

overflow: hidden;

Kod poniższych przykładów jest taki sam jak dla wcześniejszych zmieniamy jedynie ustawienie overflow.

Ten tekst może być dowolnie długi – a nawet musi, aby zobaczyć efekt stylu…

Tekst z powyższego przykładu minimalnie mieści się w kontenerze więc nie powinien nic stracić i być całkowicie widoczny. Sprawa ma się jednak inaczej w przypadku tabelki, która zostanie wyświetlona jako przycięta.

1 tekst 12 tekst 13 tekst 1
4 tekst 15 tekst 16 tekst 1

Działanie – visable

Przykład visible – w tym przypadku tekst będzie wychodził poza kontener w efekcie więc będzie nakładał się na elementy umieszczone pod nim.

overflow: visible;

Ten tekst może być dowolnie długi – a nawet musi, aby zobaczyć efekt stylu…

Co warto wiedzieć?

Z pomocą CSS możemy manipulować wyglądem naszego paska. Jednak trzeba pamiętać, że każda przeglądarka nieco inaczej interpretuje tę właściwość i dopasowuje ją do własnej szaty graficznej. Dobrym przykładem jest tu porównanie 2 popularnych przeglądarek Chrome i Firefox.

Podczas gdy w Chrome nasz pasek może mieć dowolny kolor. To już nie jest to możliwe w Firefox. Z pomocą CSS – JS to zupełnie inna bajka.

Zmiana wyglądu scroll

Praktycznie w każdej wyszukiwarce z wyjątkiem Firefox można zmienić wygląd Scroll.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem deleniti accusantium quasi ab ad officia cupiditate sed aliquam nobis expedita velit dolorum perspiciatis pariatur nam vero et magnam soluta tempora!
Eveniet deserunt consequatur porro molestiae nulla optio quis totam libero iste nemo odit eum facilis sapiente. Harum similique cupiditate voluptas ea optio sunt molestias eius ab qui obcaecati nesciunt id?

Jak widać wygląd Scroll uległ zmianie. Osiągnełam to dzięki następującemu kodowi:

<div class="inny" data-simplebar="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem deleniti accusantium quasi ab ad officia cupiditate sed aliquam nobis expedita velit dolorum perspiciatis pariatur nam vero et magnam soluta tempora!</p>
<p>&nbsp;</p>
<p>Eveniet deserunt consequatur porro molestiae nulla optio quis totam libero iste nemo odit eum facilis sapiente. Harum similique cupiditate voluptas ea optio sunt molestias eius ab qui obcaecati nesciunt id?</p>
<p>&nbsp;</p>
</div>

W arkuszu styli CSS umieszczasz zaś kod

.inny{    max-height: 250px;
    background: whitesmoke;
    overflow: auto;
    width: 80%;
    max-width: 600px;
    margin: 0 auto;
    padding: 3em;
    font: 100%/1.4 serif;
    border: 1px solid rgba(0,0,0,0.25)}

.inny::-webkit-scrollbar {
    width: 10px;
}
 
.inny::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
 
.inny::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
   border-radius: 20px 20px;
}

::-webkit-scrollbar – określa szerokość scroll (w tym wypadku to 10px)
::-webkit-scrollbar-thumb – określa kolorystykę

Czy potrzebuję skryptów JS?

Do powyższej metody by zaczęła działać nie są ci one potrzebne. JavaScript może się przydać jednak do zmiany wyglądu.

Warto przeczytać: