Jak dodać pasek przewijania (scroll) CSS – overflow

Czasami zdarza, się że zawartość kontenera (np. <div>) na stronie internetowej jest znacznie większa niż sam kontener. Co sprawia, że kontener zmienia swoje wymiary lub jego zawartość (treść, grafika lun inne elementy) się w nim nie mieszczą. O ile na komputerach problem ten jest często drobiazgiem to na urządzeniach mobilnych różnie już bywa.

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:

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

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.

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;

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

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.

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;

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>&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ć:

• Zmiana zachowania scrolla na stronie internetowej
• Responsywne tabele na stronie internetowej