CSS Academy · Lekcja

overflow: hidden, scroll, auto, clip

Nauczy się Pan/Pani kontrolować sposób obsługi przepełnionej zawartości za pomocą wartości hidden, scroll, auto i clip.

Lekcja 1 z 413 kroki

overflow: hidden, scroll, auto, clip to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 1 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.

Podsumowanie właściwości overflow

overflow określa, co dzieje się, gdy zawartość elementu przekracza jego zdefiniowane wymiary. Właściwość działa jednocześnie na obu osiach (lub użyj overflow-x/overflow-y, aby sterować każdą osią osobno).

overflow: visible

visible (wartość domyślna) — zawartość jest renderowana poza obszarem elementu. Nie tworzy Block Formatting Context (BFC). Inne elementy mogą nachodzić na wystającą zawartość.

overflow: hidden

hidden przycina zawartość na granicy obszaru elementu. Tworzy BFC, który obejmuje elementy pływające i zapobiega scalaniu marginesów. To najczęściej używana wartość w kontenerach obrazów z zaokrąglonymi narożnikami.

  <div class="rounded-card"></div>

overflow: scroll

scroll zawsze wyświetla paski przewijania (na osiach, które je obsługują), niezależnie od tego, czy zawartość wystaje poza obszar elementu. Przydaje się w spójnym interfejsie, w którym miejsce na paski przewijania powinno być zawsze zarezerwowane, aby zapobiegać przesuwaniu układu.

  <div class="console">line 1<br>line 2<br>line 3<br>line 4<br>line 5<br>line 6<br>line 7<br>line 8<br>line 9<br>line 10<br>line 11<br>line 12</div>

overflow: auto

auto wyświetla paski przewijania tylko wtedy, gdy zawartość faktycznie wystaje poza obszar elementu. W większości przewijanych kontenerów jest preferowana względem scroll, ponieważ zapobiega niepotrzebnemu renderowaniu pasków przewijania.

  <div class="sidebar">Sidebar content line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5</div>

overflow: clip

clip przycina zawartość podobnie jak hidden, ale NIE tworzy BFC. Oznacza to, że nie wpływa na obejmowanie elementów pływających ani scalanie marginesów. Użyj tej wartości, gdy potrzebujesz przycinania bez efektów ubocznych BFC.

  <div class="decorative-overflow"><div class="deco"></div></div>

overflow-x i overflow-y

Steruj każdą osią niezależnie. Bardzo często stosuje się przewijanie w poziomie dla szerokiej zawartości (tabel, kodu), przy jednoczesnym zachowaniu widocznego przepełnienia w pionie:

  <div class="table-wrapper">
    <table>
      <tr><th>A</th><th>B</th><th>C</th><th>D</th><th>E</th></tr>
      <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
    </table>
  </div>

overflow i BFC

Ustawienie overflow na dowolną wartość inną niż visible i clip tworzy Block Formatting Context. Obejmuje on wewnętrzne elementy pływające, zapobiega wydostawaniu się scalonych marginesów i ustanawia nowy kontekst przewijania.

overflow: overlay (niestandardowe)

overflow: overlay rysuje pasek przewijania nad zawartością, zamiast zajmować miejsce w układzie. W niektórych przeglądarkach była to wartość niestandardowa; jest wycofywana na rzecz nowoczesnego stylowania pasków przewijania.

scrollbar-gutter

Nowa właściwość scrollbar-gutter: stable rezerwuje miejsce na pasek przewijania nawet wtedy, gdy nie jest on potrzebny, zapobiegając przesunięciu układu, gdy zawartość stanie się przewijalna.

  <div class="container">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6<br>Line 7</div>

overflow i elementy potomne o stałej pozycji

Częsty błąd: element potomny z position: fixed umieszczony wewnątrz elementu z overflow: hidden będzie zachowywać się jak position: absolute — stała pozycja będzie odnosić się do bloku zawierającego, a overflow tworzy nowy kontekst stosu.

Szybkie sprawdzenie

Która wartość overflow przycina zawartość bez tworzenia Block Formatting Context?

Odpowiedz w interaktywnej lekcji

Podsumowanie

visible (wartość domyślna) pozwala na wystawanie zawartości poza obszar elementu. hidden przycina zawartość i tworzy BFC. scroll zawsze wyświetla paski przewijania. auto wyświetla paski przewijania tylko wtedy, gdy są potrzebne (wartość preferowana). clip przycina zawartość bez tworzenia BFC. Użyj overflow-x/y, aby sterować każdą osią osobno. Użyj scrollbar-gutter: stable, aby zapobiegać przesuwaniu układu.

Bezpłatny start

Ucz się CSS dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 40
Lekcje: 159

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „overflow: hidden, scroll, auto, clip” jest bezpłatna?

Tak — pełny tekst „overflow: hidden, scroll, auto, clip” 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: hidden, scroll, auto, clip”?

Nauczy się Pan/Pani kontrolować sposób obsługi przepełnionej zawartości za pomocą wartości hidden, scroll, auto i clip. Ć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 1 z 4.

Ile czasu zajmuje lekcja „overflow: hidden, scroll, auto, clip”?

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

overflow: hidden, scroll, auto, clip
scroll-behavior: smooth
scroll-snap-type i scroll-snap-align
Stylizowanie pasków przewijania za pomocą ::-webkit-scrollbar

← Powrót do CSS Academy