Jak dodać pasek przewijania (scroll) CSS – overflow

Czas czytania: 3 minut

Czasami zdarza, się że zawartość elementu (kontenera) jest większa niż przewidziana na jego ilość. Szerokość i wysokość w praktyce są zbyt małe by pomieścić całą zawartość w efekcie wszystko się deformuje i nie wygląda za ładnie. Bywa też iż sami chcemy by nasz tekst mieścił się na danej przestrzeni np. kiedy robimy popup i nie chcemy by zajmował dużo miejsca. W takiej sytuacji przyda nam się właściwość CSS overflow.

Kilka informacji o właściwości CSS overflow

Z pomocą overflow można uzyskać różnego typu rozwiązania problemu (dodanie do pola pasków przewijania). Overflow przyjmuje kilka wartości:

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.

Przykłady zastosowania overflow

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…

<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

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

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

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

Tekst nie powinien nic stracić, ale sama tabelka zostanie przycięta.

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

Działanie – visable

Przykład visible

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:

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?
<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><div>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: 300px;
    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.