Rozszerzone menu

The CSS Podcast - 034: Overflow

Gdy treść wykracza poza element nadrzędny, masz wiele opcji jej obsługi. Możesz przewijać, aby dodać więcej miejsca, przycinać przepełnione krawędzie, oznaczać ucięcie wielokropkiem i wiele więcej. Przepełnienie jest szczególnie ważne w przypadku tworzenia aplikacji na telefony i na różne rozmiary ekranów.

W CSS są 2 różne opcje przycinania: text-overflow pomaga w przypadku poszczególnych wierszy tekstu, a właściwości overflow pomagają kontrolować przepełnienie w modelu pudełkowym.

Przepełnienie jednego wiersza: text-overflow

মহিলা text-overflow właściwości w dowolnym elemencie zawierającym węzły tekstowe, np. w akapicie <p>. Określa, jak tekst ma się wyświetlać, gdy nie mieści się w dostępnym miejscu elementu. Cały widoczny tekst HTML na stronie znajduje się w węzłach tekstowych. Aby użyć text-overflow, musisz mieć jeden wiersz tekstu bez zawijania, więc musisz też ustawić overflow na hidden i mieć wartość white-space, która zapobiega zawijaniu.

p {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

Korzystanie z właściwości przepełnienia

Właściwości przepełnienia są ustawiane w elemencie, aby kontrolować, co się stanie, gdy jego elementy podrzędne będą potrzebować więcej miejsca niż jest dostępne. Może to być celowe, np. w przypadku interaktywnej mapy takiej jak Mapy Google, gdzie użytkownik przesuwa duży obraz przycięty do określonego rozmiaru. Może to być też niezamierzone, np. w aplikacji do czatowania, gdy użytkownik wpisze długą wiadomość, która nie mieści się w dymku.

Nadmiar można podzielić na 2 części. Element nadrzędny ma ściśle określone miejsce, które się nie zmieni. Możesz to sobie wyobrazić jako okno. Elementy podrzędne to treści, które wymagają więcej miejsca niż element nadrzędny. Możesz to sobie wyobrazić jako to, co widzisz przez okno. Zarządzanie przepełnieniem pomoże określić, jak okno kadruje te treści.

Przewijanie w pionie i w poziomie

Właściwość overflow-y kontroluje fizyczne przepełnienie wzdłuż osi pionowej widocznego obszaru urządzenia, a tym samym przewijanie w górę i w dół.

Właściwość overflow-x kontroluje przepełnienie wzdłuż osi poziomej obszaru wyświetlania urządzenia, a tym samym przewijanie w lewo i w prawo.

Właściwości logiczne kierunku przewijania

Właściwości overflow-inline i overflow-block określają przepełnienie na podstawie kierunku dokumentu i trybu pisania.

Skrót overflow

Skrót overflow ustawia style overflow-x i overflow-y w jednym wierszu:

overflow: hidden scroll;

Jeśli określono 2 słowa kluczowe, pierwsze dotyczy parametru overflow-x, a drugie – parametru overflow-y. W przeciwnym razie zarówno overflow-x, jak i overflow-y używają tej samej wartości.

Wartości

Przyjrzyj się bliżej wartościom i słowom kluczowym dostępnym we właściwościach overflow.

overflow: visible (domyślnie)

Jeśli nie ustawisz tej właściwości, domyślną wartością w przypadku internetu będzie overflow: visible. Dzięki temu treści nigdy nie są przypadkowo ukrywane i są zgodne z głównymi zasadami „nigdy nie ukrywaj treści” lub „bezpieczne układy precyzyjnych układów”.

overflow: hidden

W przypadku overflow: hidden zawartość jest przycinana w określonym kierunku i nie są wyświetlane paski przewijania.

overflow: scroll

overflow: scroll włącza paski przewijania, aby umożliwić użytkownikom przewijanie treści. Paski przewijania będą widoczne nawet wtedy, gdy cała zawartość mieści się w kontenerze. To świetny sposób na ograniczenie przyszłych przesunięć układu, jeśli kontener może być w przyszłości przewijany, np. w wyniku zmiany rozmiaru, oraz na wizualne przygotowanie użytkownika na obszary przewijane.

overflow: clip

Podobnie jak w przypadku overflow: hidden, zawartość z overflow: clip jest przycinana do obszaru dopełnienia elementu. Różnica między clip a hidden polega na tym, że słowo kluczowe clip zabrania też wszelkiego przewijania, w tym przewijania automatycznego.

overflow: auto

Na koniec wartość najczęściej używana, overflow: auto. Dzięki temu uwzględniane są preferencje użytkownika, a paski przewijania są wyświetlane w razie potrzeby, ale domyślnie są ukryte. Odpowiedzialność za przewijanie jest przenoszona na użytkownika i przeglądarkę.

Przewijanie i przepełnienie

Wiele z tych overflowzachowań wprowadza pasek przewijania, ale istnieje kilka konkretnych zachowań i właściwości przewijania, które mogą pomóc w kontrolowaniu przewijania w kontenerze przepełnienia.

Przewijanie i ułatwienia dostępu

Ważne jest, aby obszar przewijania mógł być zaznaczany, tak aby użytkownik klawiatury mógł przejść do pola za pomocą klawisza Tab, a następnie przewijać je za pomocą klawiszy strzałek.

Aby umożliwić polu przewijania przejęcie fokusu, dodaj atrybut tabindex="0", nazwę z atrybutem aria-labelledby i odpowiedni atrybut role. Na przykład:

<div tabindex="0" role="region" aria-labelledby="id-of-descriptive-text">
    content
</div>

Za pomocą CSS można wskazać, że pole jest aktywne, używając właściwości outline, aby wizualnie zaznaczyć, że można je teraz przewijać.

W artykule Using CSS to Enforce Accessibility (Używanie CSS do wymuszania dostępności) Adrian Roselli pokazuje, jak CSS może pomóc w zapobieganiu regresji dostępności. Możesz np. włączyć przewijanie i dodać wskaźnik fokusu tylko wtedy, gdy używane są prawidłowe atrybuty. Poniższe reguły sprawią, że pole będzie przewijane tylko wtedy, gdy ma atrybuty tabindex, aria-labelledby i role.

[role][aria-labelledby][tabindex] {
  overflow: auto;
}

[role][aria-labelledby][tabindex]:focus {
  outline: .1em solid blue;
}

Położenie paska przewijania w modelu pudełkowym

Paski przewijania zajmują miejsce wewnątrz pola dopełnienia i mogą konkurować o miejsce, jeśli inline, a nie overlaid. Więcej informacji o tym potencjalnym źródle przesunięcia układu znajdziesz w module modelu pudełkowego.

root-scroller a implicit-scroller

Możesz zauważyć, że niektóre przewijane obszary mają funkcję „przeciągnij, aby odświeżyć” i inne specjalne funkcje, zwłaszcza podczas tworzenia aplikacji mobilnych i hybrydowych. To przewijanie odbywa się w głównym elemencie przewijanym. Na stronie zawsze jest tylko jeden główny element przewijany. Domyślnie elementem documentElement jest główny element przewijany strony. Zmiana elementu, który jest głównym elementem przewijanym, umożliwia stosowanie specjalnych zachowań do elementów przewijanych innych niż documentElement. Ten nowy element przewijany nazywamy niejawnym głównym elementem przewijanym.

Aby utworzyć główny element przewijany, możesz użyć promocji elementu przewijanego, ustawiając kontener jako stały, tak aby obejmował cały obszar widoku i miał najwyższy indeks z w elementem przewijanym. Zobacz, jak działa główny element przewijany w porównaniu z zagnieżdżonym niejawnym elementem przewijanym – tutaj.

Stylizowanie paska przewijania

Możesz dostosować styl paska przewijania, aby pasował do wyglądu Twojej witryny. scrollbar-color ustawia kolor suwaka i rynny paska przewijania.

Aby zmienić szerokość paska przewijania, użyj scrollbar-width. Nie możesz ustawić dowolnej długości, ale możesz określić, czy chcesz mieć thin pasek przewijania czy none.

scroll-behavior

scroll-behavior umożliwia włączenie przewijania do elementów kontrolowanego przez przeglądarkę. Umożliwia to określenie sposobu obsługi nawigacji na stronie, np. .scrollTo() lub linków.

Jest to szczególnie przydatne w połączeniu z prefers-reduced-motion, aby określić zachowanie przewijania na podstawie preferencji użytkownika.

@media (prefers-reduced-motion: no-preference) {
  .scroll-view {
    scroll-behavior: auto;
  }
}

overscroll-behavior

Jeśli kiedykolwiek zdarzyło Ci się przewinąć do końca nakładki modalnej, a potem kontynuować przewijanie i zauważyć, że strona za nakładką się przesuwa, to jest to łańcuchowe przewijanie lub przenoszenie przewijania do nadrzędnego kontenera przewijania. Właściwość overscroll-behavior umożliwia zapobieganie przepełnieniu przewijania w kontenerze nadrzędnym (tzw. łańcuch przewijania).

Przewijanie z przyciąganiem

Przewijanie jest zwykle płynne, co pozwala umieścić treść w obszarze przewijania w dowolnym miejscu. W przypadku niektórych projektów, takich jak galerie obrazów lub treści emulujące strony lub slajdy, możesz chcieć, aby treść przyciągała się do obszaru przewijania.

Konfigurowanie kontenera przewijania

Aby włączyć przyciąganie przewijania, dodaj scroll-snap-type do kontenera przewijania. Najpierw określisz oś, wzdłuż której będzie następowało przyciąganie przewijania. Może to być właściwość logiczna (block lub inline), właściwość fizyczna (x lub y) lub both.

Możesz też określić, jak ścisłe ma być przyciąganie przewijania. Domyślna wartość parametru strictness to proximity, co oznacza, że kontener przewijania będzie próbował przyciągać, jeśli to możliwe. Możesz też ustawić poziom rygoru na mandatory, aby mieć pewność, że kontener przewijania zawsze będzie się zatrzaskiwał.

.scroll-container {
    scroll-snap-type: block mandatory;
}

Przyciąganie przewijania wyrównuje element w pełnych granicach kontenera przewijania, ale co się stanie, jeśli część kontenera przewijania nie jest widoczna? Możesz na przykład mieć stały nagłówek, który nakłada się na część kontenera przewijania. Aby ułatwić wyrównanie przyciągniętych elementów do widocznej części kontenera przewijania, możesz ustawić wartość scroll-padding.

Sterowanie elementami przyciąganymi

Aby element był przyciągany, ustaw właściwość scroll-snap-align na start, end lub center. Jeśli kierunek przyciągania przewijania to both, możesz ustawić 2 wartości. Określa, czy krawędź elementu będzie wyrównana z krawędzią obszaru przewijania, czy będzie wyśrodkowana.

Odstępy wokół krawędzi przyciągniętego elementu możesz dostosować za pomocą ikony scroll-margin:

scroll-margin służy też do ustawiania dopełnienia podczas przewijania do elementu:

Aby przewijanie było bardziej płynne, możesz dodać scroll-snap-stop: always do elementu w kontenerze przewijania. Nie uniemożliwia to przewinięcia wielu elementów za jednym razem. Aware Scrolling zatrzyma przewijanie w najbliższym punkcie przyciągania, zamiast kontynuować je dalej.

Sprawdź swoją wiedzę

Zasoby

Overflow And Data Loss In CSS from Smashing Magazine