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 znajdziesz w tym wpisie
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:
| visible | zawartość po przepełnieniu elementu będzie cała widoczna nakładając się na pozostałe elementy umieszczone na strony. |
| hidden | ukrywa zawartość wychodzącą poza obszar obiektu. Pasek jak przewijania jest wyłączony i nie mamy dostępu do niewidocznej części tekstu |
| scroll | wielkość elementu zawierającego nie ulega zmianie, ale zostają dodane paski przewijania w celu umożliwienia użytkownikowi przewinięcia zawartość. |
| auto | efekt 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. |
Ciekawostka: Wł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 1 | 2 tekst 1 | 3 tekst 1 |
| 4 tekst 1 | 5 tekst 1 | 6 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 1 | 2 tekst 1 | 3 tekst 1 |
| 4 tekst 1 | 5 tekst 1 | 6 tekst 1 |
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.
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.
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.
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> </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> </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ć:
- Zmiana zachowania scrolla na stronie internetowej
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.