The CSS Podcast - 034: Overflow
Gdy treści wykraczają poza zakres rodzica, możesz je przetwarzać na wiele sposobów. Możesz przewijać, aby dodać dodatkowe miejsce, przyciąć zachodzące na siebie krawędzie, wskazać miejsce obcięcia za pomocą wielokropka i tak dalej. Przepełnienie jest szczególnie ważne podczas tworzenia aplikacji na telefony i różne rozmiary ekranu.
W CSS istnieją 2 różne opcje przycinania: text-overflow
służy do przycinania poszczególnych wierszy tekstu, a właściwości overflow
pozwalają kontrolować przepełnianie w modelu pudełka.
Przepełnienie pojedynczej linii z text-overflow
Użyj właściwości text-overflow
w dowolnym elemencie zawierającym węzły tekstowe, np. akapicie(<p>
). Określa, jak tekst ma się wyświetlać, gdy nie mieści się w dostępnej przestrzeni elementu. Cały widoczny tekst HTML na stronie znajduje się w węzłach tekstowych. Aby użyć tagu text-overflow
, musisz mieć jeden nieprzewinięty wiersz tekstu, więc musisz też ustawić wartość overflow
na hidden
i mieć wartość white-space
, która zapobiega przewijaniu.
p {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
Korzystanie z usług przepełnienia
Właściwości przepełnienia są ustawiane w elemencie, aby kontrolować, co się dzieje, gdy jego elementy podrzędne potrzebują więcej miejsca niż jest dostępne. Może to być celowe działanie, np. w przypadku interaktywnej mapy, takiej jak Mapy Google, gdzie użytkownik może przesuwać duży obraz przycięty do określonego rozmiaru. Może to być też niezamierzone, na przykład w aplikacji do czatu, gdy użytkownik wpisze długi tekst, który nie mieści się w dymku tekstowym.
Przepełnienie można podzielić na 2 części. Element nadrzędny ma ściśle ograniczoną przestrzeń, która nie ulegnie zmianie. Możesz to sobie wyobrazić jako okno. Elementy podrzędne to treści, które potrzebują więcej miejsca od elementu nadrzędnego. Możesz to sobie wyobrazić jako to, na co patrzysz przez okno. Zarządzanie przepełnieniem pomoże określić, jak okno będzie otaczać treści.
Przewijanie po osi pionowej i poziomej
Właściwość overflow-y
kontroluje fizyczne przepełnienie wzdłuż osi pionowej widocznego obszaru urządzenia, a więc przewijanie w górę i w dół.
Właściwość overflow-x
kontroluje przepełnienie wzdłuż osi poziomej widoku urządzenia, a więc przewijanie w lewo i w prawo.
Właściwości logiczne kierunku przewijania
Właściwości overflow-inline
i overflow-block
ustawiają przepełnienie na podstawie kierunku i trybu pisania dokumentu.
Skrót overflow
Krótki kod overflow
ustawia oba style overflow-x
i overflow-y
w jednym wierszu:
overflow: hidden scroll;
Jeśli podasz 2 słowa kluczowe, pierwsze będzie miało zastosowanie do overflow-x
, a drugie do overflow-y
. W przeciwnym razie zarówno overflow-x
, jak i overflow-y
mają tę samą wartość.
Wartości
Przyjrzyjmy się bliżej wartościom i kluczowym słowom dostępnym w usługach overflow
.
overflow: visible
(domyślnie)- Bez ustawienia właściwości domyślną wartością w internecie jest
overflow: visible
. Dzięki temu treści nigdy nie zostaną niezamierzenie ukryte i spełnią główne zasady „nigdy nie ukrywać treści” lub „bezpieczne układy dokładnych 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 suwaki, aby umożliwić użytkownikom przewijanie treści. Nawet jeśli treści nie są obecnie przepełnione, suwaki będą widoczne. To świetny sposób na ograniczenie przesuwania się układu w przyszłości, jeśli w przyszłości kontener będzie można przewijać na podstawie np. rozmiaru, oraz na wizualne przygotowanie użytkownika do obsługi obszarów przewijania.overflow: clip
- Podobnie jak w przypadku
overflow: hidden
, zawartość zoverflow: clip
jest przycinana do pola wypełnienia elementu. Różnica między słowami kluczowymiclip
ahidden
polega na tym, że słowo kluczoweclip
zabrania także przewijania, w tym automatycznego. overflow: auto
- Na koniec wartość najczęściej używana,
overflow: auto
. Szanuje on preferencje użytkownika i w razie potrzeby wyświetla suwaki, ale domyślnie je ukrywa, a odpowiedzialnie za przewijanie przejmuje użytkownik i przeglądarka.
Przewijanie i przelanie
Wiele z tych overflow
zachowań powoduje wyświetlenie paska przewijania, ale istnieje kilka konkretnych zachowań i właściwości przewijania, które mogą pomóc w sterowaniu przewijaniem w kontenerze przepełnienia.
Przewijanie i ułatwienia dostępu
Upewnij się, że obszar, który można przewijać, może być zaznaczony, aby użytkownik mógł użyć klawisza Tab, aby przejść do pola, a potem używać klawiszy strzałek do przewijania.
Aby umożliwić okienku przewijania przejęcie fokusa, dodaj 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żesz wskazać, że pole ma fokus, używając właściwości outline
, aby dać wizualną wskazówkę, że będzie można je przewijać.
W artykule Używanie CSS do egzekwowania dostępności Adrian Roselli pokazuje, jak CSS może zapobiegać regresji dostępności. Możesz na przykład włączyć przewijanie i dodać wskaźnik fokusu tylko wtedy, gdy używane są prawidłowe atrybuty. Podane niżej reguły sprawią, że pole będzie przewijalne tylko wtedy, gdy ma atrybut tabindex
, aria-labelledby
i role
.
[role][aria-labelledby][tabindex] {
overflow: auto;
}
[role][aria-labelledby][tabindex]:focus {
outline: .1em solid blue;
}
Umieszczenie paska przewijania w ramach modelu pudełka
Paski przewijania zajmują miejsce w obszarze wypełnienia i mogą konkurować o miejsce, jeśli inline
, a nie overlaid
. Moduł modelu pudełkowego zawiera więcej informacji o tym potencjalnym źródle zmian układu.
root-scroller vs implicit-scroller
Możesz zauważyć, że niektóre suwaki mają funkcję odświeżania przez pociągnięcie i inne specjalne funkcje, zwłaszcza podczas tworzenia aplikacji mobilnych i hybrydowych. To zachowanie przewijania występuje w przypadku głównego scrollera. Na stronie może być tylko jeden element przewijania. Domyślnie element documentElement jest głównym elementem przewijania strony, ale po zmianie elementu głównego przewijania można stosować specjalne zachowania do elementów przewijania innych niż documentElement. Nowy element nazywamy domyślnym elementem głównym przewijania.
Aby utworzyć główny scroller, możesz użyć funkcji promowania scrollera, umieszczając kontener w pozycji stałej, tak aby obejmował cały widok i był z góry widoczny w scrollerze. Tutaj możesz porównać scroller główny i zagnieżdżony scroller domyślny.
scroll-behavior
scroll-behavior
umożliwia włączanie korzystania z przewijania elementów sterowanego przez przeglądarkę. Dzięki temu możesz określić sposób obsługi nawigacji na stronie, np. .scrollTo()
lub linków.
Jest to szczególnie przydatne, gdy używasz atrybutu prefers-reduced-motion, aby określić zachowanie podczas przewijania na podstawie preferencji użytkownika.
@media (prefers-reduced-motion: no-preference) {
.scroll-view {
scroll-behavior: auto;
}
}
overscroll-behavior
Jeśli kiedykolwiek dotarłeś(-aś) do końca nakładki modalnej, a następnie kontynuowałeś(-aś) przewijanie i strona za nakładką się przesunęła, jest to efekt łańcucha przewijania, czyli przeniesienia do góry do kontenera nadrzędnego. Właściwość overscroll-behavior
umożliwia zapobieganie wyciekowi przewijania z przepełnieniem do kontenera nadrzędnego (tzw. łańcuchowanie przewijania).
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę o przepełnieniu
Czy przepełnienie tekstu i przepełnienie elementu są takie same?
Właściwość overflow
akceptuje 2 słowa kluczowe. Do której osi należy pierwsze słowo kluczowe?
Jaką przestrzeń w modelu pudełka zajmują paski przewijania podczas wyświetlania i wstawiania?
Której właściwości użyjesz, aby zatrzymać dodatkowy ruch spowodowany przewijaniem w zagnieżdżonym nawigatorze?
scroll-padding
scroll-behavior
scroll-hint
overscroll-behavior
overscroll-effect