Podcast o CSS – 034: Overflow
Jeśli treść wykracza poza swoje źródło nadrzędne, możesz radzić sobie z nią na wiele sposobów. Możesz przewijać, aby dodać więcej miejsca, przyciąć nadmiarowe krawędzie, wskazać granicę za pomocą wielokropka i korzystać z wielu innych funkcji. Przepełnienie jest szczególnie ważne w przypadku tworzenia aplikacji na telefony i ekranów o różnych rozmiarach.
W kodzie CSS są 2 różne opcje przycinania: text-overflow
pomoże z poszczególnymi wierszami tekstu, a właściwości overflow
umożliwiają kontrolowanie nadmiaru tekstu w modelu pola.
Rozszerzone menu z jednym wierszem: text-overflow
Użyj właściwości text-overflow
w przypadku każdego elementu, który zawiera węzły tekstowe, np. akapitu <p>
. Określa sposób wyświetlania tekstu, gdy nie mieści się on w dostępnym miejscu elementu. Cały widoczny tekst HTML na stronie znajduje się w węzłach tekstowych. Aby użyć funkcji text-overflow
, potrzebujesz 1 niezawiniętego wiersza tekstu. Musisz też ustawić overflow
na hidden
i podać wartość white-space
, która zapobiega zawijaniu tekstu.
p {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
Korzystanie z właściwości nadpełniających się
Właściwości przepełnienia są ustawione w elemencie, aby kontrolować, co się dzieje, gdy elementy podrzędne potrzebują więcej miejsca, niż jest dostępne. Może to być celowe, np. na interaktywnej mapie, takiej jak Mapy Google, gdzie użytkownik przesuwa duży obraz przycięty do określonego rozmiaru. Może to również być niezamierzone, jak w aplikacji czatu, gdy użytkownik wpisuje długą wiadomość, która nie mieści się w dymku tekstowym.
Przelew możesz podzielić na 2 części. Element nadrzędny jest mocno ograniczony i nie zmienia się. Można to traktować jako okno. Elementy podrzędne to treści, które wymagają więcej miejsca od elementu nadrzędnego. To tak, jak patrzysz przez okno. Zarządzanie nadmiarem pomaga określić, jak okna będą obramowane danej treści.
Przewijanie po osi pionowej i poziomej
Właściwość overflow-y
steruje fizycznym przepełnieniem wzdłuż osi pionowej widocznego obszaru urządzenia, więc przewijanie w górę i w dół.
Elementy sterujące właściwości overflow-x
rozciągają się wzdłuż poziomej osi widocznego obszaru urządzenia, dlatego przewijają się 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 i trybu pisania dokumentu.
overflow
– skrót
Skrócony skrót overflow
ustawia w jednym wierszu styl overflow-x
i overflow-y
:
overflow: hidden scroll;
Jeśli podasz 2 słowa kluczowe, pierwsze z nich będzie miało zastosowanie do overflow-x
, a drugiego do overflow-y
. W przeciwnym razie funkcje overflow-x
i overflow-y
używają tej samej wartości.
Wartości
Przyjrzyjmy się bliżej wartościom i słowom kluczowym dostępnym w usługach overflow
.
overflow: visible
(domyślnie)- Bez ustawienia właściwości
overflow: visible
jest wartością domyślną dla sieci. Dzięki temu treści nigdy nie będą nieumyślnie ukryte i będą zgodne z podstawowymi zasadami, takimi jak „Nigdy nie ukrywaj treści” i „Bezpieczne układy precyzyjnych układów”. overflow: hidden
- Treści w formacie
overflow: hidden
są przycinane w określonym kierunku i nie są dostępne żadne paski przewijania. overflow: scroll
overflow: scroll
włącza paski przewijania, aby umożliwić użytkownikom przewijanie treści. Nawet jeśli zawartość nie jest przepełniona, paski przewijania będą widoczne. To świetny sposób na ograniczenie przyszłych przesunięć układu, jeśli kontener będzie można w przyszłości przewijać (np. podczas zmiany rozmiaru), a także wizualnie przygotuje użytkownika do przewijania obszarów.overflow: clip
- Podobnie jak
overflow: hidden
, treść z elementemoverflow: clip
jest przycięta do pola dopełnienia elementu. Różnica międzyclip
ahidden
polega na tym, że słowo kluczoweclip
również blokuje przewijanie, w tym przewijanie automatyczne. overflow: auto
- Ostatnia wartość to
overflow: auto
. Uwzględnia preferencje użytkownika i w razie potrzeby wyświetla paski przewijania, ale domyślnie ukrywa je i przyznaje odpowiedzialność za przewijanie do użytkownika i przeglądarki.
Przewijanie i przewijanie
Wiele elementów overflow
związanych z przewijaniem powoduje wprowadzenie paska przewijania, ale są też pewne zachowania 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 przewijany mógł akceptować zaznaczenie, tak aby użytkownik klawiatury mógł przejść klawiszem Tab do pola, a następnie używać klawiszy strzałek do przewijania.
Aby umożliwić przewijanie zaznaczenia z zaznaczoną treścią, dodaj element 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>
Następnie można użyć CSS, aby wskazać, że pole jest zaznaczone. Użyj właściwości outline
, aby wizualizować, że można je teraz przewijać.
W filmie Using CSS to Enforce Accessibility (Używanie CSS w celu egzekwowania ułatwień dostępu) Adrian Roselli pokazuje, jak CSS może pomóc zapobiegać regresjom ułatwień dostępu. Można na przykład włączyć przewijanie i dodać wskaźnik zaznaczenia tylko wtedy, gdy zostały użyte odpowiednie atrybuty. Poniższe reguły umożliwiają przewijanie pola tylko wtedy, gdy ma ono atrybut tabindex
, aria-labelledby
i role
.
[role][aria-labelledby][tabindex] {
overflow: auto;
}
[role][aria-labelledby][tabindex]:focus {
outline: .1em solid blue;
}
Pozycjonowanie paska przewijania w modelu ramki
Paski przewijania zajmują miejsce w obrębie pola dopełnienia i mogą konkurować o miejsce, jeśli inline
, a nie overlaid
. Moduł modelu ramki zawiera więcej informacji na temat tego potencjalnego źródła przesunięcia układu.
root-scroller a implicit-scroller
Zwróć uwagę, że niektóre przewijane elementy przewijają się i obserwują inne szczególne zachowania, zwłaszcza w przypadku aplikacji mobilnych i hybrydowych. To przewijanie się odbywa się w przypadku głównego elementu przewijania. Na stronie jest tylko jeden główny element przewijania. Domyślnie element documentElement jest głównym elementem przewijania strony. Jednak po zmianie elementu przewijającego w górę, specjalne zachowanie może zostać zastosowane do przewijania innych niż element documentElement. W takiej sytuacji nowy element przewijania określamy jako niejawny główny przewijany.
Aby utworzyć główny element przewijania, możesz użyć promocji przewijanej. W tym celu ustaw kontener jako nieruchomy, tak aby obejmował cały widoczny obszar, a w przypadku przewijania przewijał się. Zobacz tutaj zestawienie przewijającego głównego i zagnieżdżonego przewijania niejawnego.
zachowanie przewijania
scroll-behavior
umożliwia włączenie kontrolowanego przez przeglądarkę przewijania elementów. Pozwala to określić sposób obsługi elementów nawigacyjnych na stronie, takich jak .scrollTo()
czy linki.
Jest to szczególnie przydatne w przypadku użycia razem z preferowanym ograniczeniem ruchu, który pozwala określić zachowanie przewijania w zależności od preferencji użytkownika.
@media (prefers-reduced-motion: no-preference) {
.scroll-view {
scroll-behavior: auto;
}
}
nadmierne przewijanie
Jeśli zdarzyło Ci się dotrzeć do końca nakładki modalnej, a następnie przewijanie było kontynuowane, a strona nakładka przesuwała się, jest to łańcuch przewijania, czyli ruch do nadrzędnego kontenera przewijania. Właściwość overscroll-behavior
zapobiega pojawianiu się nieograniczonego przewijania do kontenera nadrzędnego (jest to nazywane łańcuchem przewijania).
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę
Elementy nadmiarowe tekstu i elementy nadmiarowe są takie same?
Właściwość overflow
akceptuje 2 słowa kluczowe. Dla której osi dotyczy pierwsze słowo kluczowe?
Jaką przestrzeń w modelu pola zajmują paski przewijania, gdy wyświetlają się w tekście i w tekście?
overlay
nakładają się na dopełnienie, a w trybie inline
są dodawane do dopełnienia.Której właściwości użyjesz, aby zatrzymać dodatkowy pęd przy przewijaniu w zagnieżdżonym przewijanym niejawnym?
scroll-behavior
scroll-hint
overscroll-behavior
contain
spowoduje zablokowanie przewijania.scroll-padding
overscroll-effect