CSS Academy · Lekcja

Overflow: scroll, clip i auto

Ustawią Państwo zachowanie treści przekraczającej rozmiar kontenera za pomocą właściwości overflow.

Overflow: scroll, clip i auto to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.

Czym jest overflow

Overflow występuje, gdy treść elementu jest większa niż jego zdefiniowane wymiary. Właściwość overflow określa sposób obsługi tej nadmiarowej treści.

overflow: visible (domyślnie)

Domyślnie treść wystająca poza pudełko elementu pozostaje widoczna. Może to powodować nakładanie się treści na sąsiednie elementy albo wydostawanie się jej poza obszar widoku.

<div class="box">This text is long enough to spill outside the box edges visibly.</div>

overflow: hidden

overflow: hidden przycina każdą treść wykraczającą poza granice elementu. Przycięta treść nie jest dostępna ani przewijalna.

<div class="cropped">This long text gets clipped by the rounded box edges instead of spilling out.</div>

overflow: scroll

overflow: scroll zawsze wyświetla paski przewijania — nawet gdy cała treść się mieści. Należy użyć tej wartości, gdy interfejs ma wyglądać spójnie niezależnie od rozmiaru treści.

<pre class="code-block">line 1
line 2
line 3
line 4
line 5
line 6
line 7
line 8
line 9
line 10</pre>

overflow: auto

overflow: auto wyświetla paski przewijania tylko wtedy, gdy treść rzeczywiście wystaje poza element. Zwykle jest to lepszy wybór niż scroll, ponieważ pozwala uniknąć niepotrzebnej rezerwy na pasek przewijania.

<div class="sidebar"><p>Paragraph one.</p><p>Paragraph two.</p><p>Paragraph three.</p><p>Paragraph four.</p><p>Paragraph five.</p><p>Paragraph six.</p></div>

overflow: clip

overflow: clip działa podobnie jak hidden, ale bardziej rygorystycznie: nie tworzy kontekstu formatowania blokowego i nie można przewijać jego zawartości za pomocą JavaScriptu. Jest idealne do bezpiecznego dla wydajności przycinania treści.

<div class="clipped">This long text will be clipped at the box edge with no scrollbar, unlike overflow hidden which still allows programmatic scrolling.</div>

overflow-x i overflow-y

Każdą oś można kontrolować niezależnie. Często stosuje się przewijanie w poziomie dla szerokiej zawartości, takiej jak kod lub tabele:

<div class="table-container"><table><tr><td>Col A</td><td>Col B</td><td>Col C</td><td>Col D</td><td>Col E</td><td>Col F</td></tr></table></div>

Wzorzec przewijanego kontenera

Aby utworzyć przewijany kontener, potrzebują Państwo zarówno stałej wysokości, jak i overflow: auto lub scroll:

<div class="chat-messages"><p>Hey!</p><p>How's it going?</p><p>Working on the CSS course.</p><p>Nice, how far are you?</p><p>Almost done with overflow.</p><p>Let's grab lunch after.</p></div>

Kontekst formatowania blokowego tworzony przez overflow

Ustawienie overflow na dowolną wartość inną niż visible tworzy kontekst formatowania blokowego (BFC). Obejmuje on wewnętrzne elementy pływające i zapobiega wydostawaniu się zwijających marginesów poza kontener.

Łańcuchowanie przewijania

Gdy przewijany kontener osiągnie granicę przewijania, zdarzenia przewijania mogą zostać „przekazane” elementowi nadrzędnemu. Aby temu zapobiec, należy użyć overscroll-behavior: contain.

<div class="modal-body"><p>Modal content line 1</p><p>Modal content line 2</p><p>Modal content line 3</p><p>Modal content line 4</p><p>Modal content line 5</p><p>Modal content line 6</p></div>

text-overflow a overflow

text-overflow: ellipsis dotyczy tekstu wewnątrz elementu i do działania wymaga overflow: hidden oraz white-space: nowrap. overflow kontroluje sposób obsługi przepełnienia samego elementu.

Szybkie sprawdzenie

Która wartość overflow wyświetla paski przewijania tylko wtedy, gdy zawartość rzeczywiście się przepełnia?

Podsumowanie

overflow: hidden przycina zawartość. overflow: auto dodaje paski przewijania tylko wtedy, gdy są potrzebne (preferowane rozwiązanie). overflow: scroll zawsze wyświetla paski przewijania. overflow: clip przycina zawartość bez tworzenia nowego kontekstu formatowania. Do kontrolowania poszczególnych osi należy używać overflow-x/y.

Często zadawane pytania

Czy lekcja „Overflow: scroll, clip i auto” jest bezpłatna?

Tak — pełny tekst „Overflow: scroll, clip i auto” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Overflow: scroll, clip i auto”?

Ustawią Państwo zachowanie treści przekraczającej rozmiar kontenera za pomocą właściwości overflow. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć CSS Academy?

Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Overflow: scroll, clip i auto”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?

Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do CSS Academy