Rozszerzone menu

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

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 69.
  • Safari: not supported.

Source

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ść z overflow: clip jest przycinana do pola wypełnienia elementu. Różnica między słowami kluczowymi cliphidden polega na tym, że słowo kluczowe clip 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-labelledbyrole.

[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.

Film pokazuje główny scroller z zachowaniem odbicia i nowymi funkcjami stylizacji,
w porównaniu z przewijaniem niejawnego scrollera bez ulepszonego zachowania przewijania.

scroll-behavior

Browser Support

  • Chrome: 61.
  • Edge: 79.
  • Firefox: 36.
  • Safari: 15.4.

Source

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

Browser Support

  • Chrome: 63.
  • Edge: 18.
  • Firefox: 59.
  • Safari: 16.

Source

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?

fałsz
prawda

Właściwość overflow akceptuje 2 słowa kluczowe. Do której osi należy pierwsze słowo kluczowe?

w poziomie
kategoria

Jaką przestrzeń w modelu pudełka zajmują paski przewijania podczas wyświetlania i wstawiania?

ramka zewnętrzna
pole treści
ramka marginesu
pole wypełniające

Której właściwości użyjesz, aby zatrzymać dodatkowy ruch spowodowany przewijaniem w zagnieżdżonym nawigatorze?

scroll-padding
overscroll-behavior
scroll-behavior
scroll-hint
overscroll-effect

Zasoby

Overflow And Data Loss In CSS from Smashing Magazine