Rozszerzone menu

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 elementem overflow: clip jest przycięta do pola dopełnienia elementu. Różnica między clip a hidden polega na tym, że słowo kluczowe clip 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ę

Zasoby

Przepływ i utrata danych w CSS z magazynu Smashing