Gotowe do testów deweloperskich: kontenery z przewijaniem w jednej osi

Bramus
Free Debreuil
Free Debreuil
LinkedIn

Opublikowano: 4 września 2026 r.

Funkcja „kontenery przewijania w jednej osi” rozszerza właściwość CSS overflow, aby obsługiwać wartości przewijania (auto, scroll, hidden) w połączeniu z clip (np. overflow: scroll clip), co powoduje, że kontenery przewijania działają tylko w jednej osi.

Ta zmiana udostępnia bardzo oczekiwane funkcje, takie jak pozycjonowanie przyklejone na osi, ale wprowadza też dodatkowe efekty uboczne w innych funkcjach zależnych od przewijania. Ze względu na potencjalne ryzyko związane ze zgodnością prosimy deweloperów o przetestowanie swoich witryn i przesłanie opinii, zanim ta funkcja zostanie udostępniona w stabilnych kanałach.

Funkcja jest dostępna do testowania przez deweloperów w Chrome 154 na kanałach wersji beta, deweloperskiej i Canary . Nie musisz włączać żadnej flagi.

Ograniczenie związane z ustawianiem przepełnienia na jednej osi

Bez tej funkcji nie można było utworzyć w CSS kontenera przewijania w jednej osi. Jeśli skonfigurujesz jedną oś do przewijania, próbując zachować widoczność drugiej osi (np. ustawisz overflow-x: scroll i pozostawisz overflow-y: visible), silnik stylów przeglądarki automatycznie wymusi obliczenie widocznej osi na auto (lub scroll). Spowoduje to utworzenie dwuwymiarowego przewijania, nawet jeśli nie było to Twoim zamiarem.

Ta cecha jest bardzo widoczna, gdy próbujesz utworzyć tabelę z przyklejonym górnym wierszem i przyklejoną pierwszą kolumną. W poniższym przykładzie celem jest, aby pierwsza kolumna była przyklejona do elementu .table-wrapper, który przewija się w poziomie, a górny wiersz był przyklejony do paska przewijania dokumentu.

<div class="table-wrapper" style="overflow-x: auto;">
  <table>
    …
  </table>
</div>

/* Scroll horizontally */
.table-wrapper {
  overflow-x: auto;
}

/* Sticky top row */
.table-wrapper thead {
  position: sticky;
  top: 0;
}

/* Sticky first column */
.table-wrapper td:first-child {
  position: sticky;
  left: 0;
}

Jeśli wypróbujesz tę funkcję, zauważysz, że nie działa. Wynika to z opisanego wcześniej problemu z przepełnieniem: element .table-wrapper staje się w praktyce dwuwymiarowym paskiem przewijania. Gdy więc position: sticky wyszukuje najbliższy element przewijany przodka dla każdej osi, w obu przypadkach wynikiem jest element .table-wrapper.

Prezentacja na żywo

Nagranie demo

Kontenery z paskami przewijania w jednym kierunku rozwiązują ten problem

W przypadku kontenerów przewijania w jednym kierunku możesz wyraźnie uniemożliwić, aby oś dodatkowa stała się przewijana, używając clip. Dzięki temu position: sticky może śledzić 2 różne kontenery przewijania niezależnie od siebie.

Aby poprawić przykład tabeli, połącz przewijanie w poziomie z overflow-y: clip.

.table-wrapper {
  overflow-x: auto;
  overflow-y: clip;
}

Możesz też użyć skrótu overflow:

.table-wrapper {
  overflow: auto clip;
}

Dzięki temu element .table-wrapper działa tylko jako kontener przewijania w osi X. Przyklejony górny wiersz będzie teraz pomijać ten element i prawidłowo przyklejać się do przewijania dokumentu wzdłuż osi Y, a pierwsza kolumna będzie nadal przyklejać się do .table-wrapper w poziomie.

Jeśli przeglądarka, w której czytasz ten post, obsługuje tę funkcję, możesz zobaczyć ją w działaniu w tym demo:

Prezentacja na żywo

Nagranie demo

Zachowania, których to dotyczy

Ponieważ kontenery przewijania w jednej osi zmieniają sposób oceniania i tworzenia kontekstów przewijania, możesz zauważyć zmiany w innych funkcjach, które korzystają z kontenerów przewijania, takich jak:

  • position: sticky: jak widać, elementy będą teraz prawidłowo przywierać do kontenerów przewijania w jednej osi, co poprawi działanie elementów ograniczonych przez overflow: clip w jednej osi.
  • overscroll-behavior: element może być teraz kontenerem przewijania tylko w jednej osi, więc zdarzenie overscroll-behavior może nie być już wywoływane w osi przycięcia, co może mieć wpływ na niestandardowe efekty odświeżania przez przeciągnięcie lub odbijania. Ta zmiana w działaniu jest zgodna z przeglądarkami Firefox i Safari.
  • Programowe przewijanie: wywoływanie interfejsów API przewijania (np. Element.scrollTo()) w kontenerze przewijania w jednej osi wymusza teraz ograniczenia przewijania programowego. Element nie będzie przewijany programowo wzdłuż osi zdefiniowanej jako clip.
  • Minimalny rozmiar komórki w siatce i układzie elastycznym: w przypadku kontenerów przewijanych w układzie siatki i układzie elastycznym domyślny minimalny rozmiar (min-width: auto) jest zwykle ignorowany, aby umożliwić komórkom dostosowanie się do dostępnego miejsca. Gdy wartość overflow: clip jest ustawiona na tej samej osi, zaczyna działać domyślny minimalny rozmiar, co może spowodować powiększenie kontenera elastycznego lub siatki.

Wykrywanie cech

Aby wykryć obsługę kontenerów przewijania w jednej osi, użyj słowa kluczowego single-axis-scroll-container, aby wysłać zapytanie o regułę @supports named-feature().

@supports named-feature(single-axis-scroll-container) {
  /* Feature is supported */
}

Jak wspomnieliśmy w CSSWG issue #13677, zalecanym standardowym sposobem wykrywania tej funkcji jest użycie named-feature(single-axis-scroll-container), ponieważ sprawdzanie za pomocą samego @supports (overflow: scroll clip) to tylko analiza składni, która nie wykrywa, czy przeglądarka prawidłowo obsługuje zmienione zachowania przewijania po jednej osi.

W JavaScript użyj do tego znaku CSS.supports("named-feature(single-axis-scroll-container)").

Chcemy poznać Twoją opinię

Aby ocenić potencjalne ryzyko związane ze zgodnością, przeprowadziliśmy testy w 190 witrynach. Z tej analizy wynika, że zmiany nie powinny powodować żadnych istotnych problemów.

Jednak kontenery przewijane w jednej osi zasadniczo zmieniają sposób oceny kontekstów przewijania, dlatego zakres jest szerszy. Prosimy o testowanie witryn i aplikacji internetowych na niestabilnych kanałach Chrome, aby pomóc nam zidentyfikować przypadki brzegowe przed wprowadzeniem tej funkcji w wersji stabilnej.

Jeśli coś zacznie działać nieprawidłowo lub napotkasz nieoczekiwane zachowanie przewijania, zgłoś błąd w Chromium.