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 z paskami przewijania w jednej osi” rozszerza właściwość CSS overflow, aby obsługiwać wartości z możliwością przewijania (auto, scroll, hidden) w połączeniu z clip (np. overflow: scroll clip), co powoduje, że kontenery z paskami przewijania działają tylko w jednej osi.

Ta zmiana odblokowuje bardzo pożądane funkcje, takie jak pozycjonowanie przyklejone w każdej osi, ale wprowadza też dodatkowe efekty uboczne w innych funkcjach zależnych od przewijania. Ze względu na te potencjalne problemy 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 153 w kanałach wersji beta, deweloperskiej i Canary release channels. Nie musisz włączać flagi.

Problem z ustawieniem przepełnienia w jednej osi

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

Ten problem staje się bardzo widoczny, gdy próbujesz utworzyć tabelę z przyklejonym górnym wierszem i przyklejoną pierwszą kolumną. W poniższym przykładzie celem jest przyklejenie pierwszej kolumny do elementu .table-wrapper, który przewija się poziomo, a górnego wiersza 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 spróbujesz, zauważysz, że to nie działa. Jest to spowodowane opisanym wcześniej problemem z przepełnieniem: element .table-wrapper staje się dwuwymiarowym paskiem przewijania. Gdy więc position: sticky szuka najbliższego paska przewijania elementu nadrzędnego dla każdej osi, w obu przypadkach wynikiem jest element .table-wrapper.

Prezentacja na żywo

Nagranie demo

Kontenery z paskami przewijania w jednej osi rozwiązują ten problem

Dzięki kontenerom z paskami przewijania w jednej osi możesz wyraźnie uniemożliwić, aby oś dodatkowa stała się paskiem przewijania, używając clip. W ten sposób position: sticky może niezależnie śledzić 2 różne kontenery z paskami przewijania.

Aby rozwiązać problem z tabelą, połącz przewijanie poziome 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 będzie działać tylko jako kontener z paskiem przewijania dla osi x. Przyklejony górny wiersz będzie teraz pomijać ten element i prawidłowo przyklejać się do paska przewijania dokumentu w osi y, a pierwsza kolumna będzie nadal przyklejać się do elementu .table-wrapper poziomo.

Jeśli czytasz ten post w przeglądarce, która obsługuje tę funkcję, możesz zobaczyć ją w działaniu w tej prezentacji:

Prezentacja na żywo

Nagranie demo

Zachowania, których to dotyczy

Ponieważ kontenery z paskami 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 z paskami przewijania, takich jak:

  • position: sticky: jak pokazano, elementy będą teraz prawidłowo przyklejać się w kontenerach z paskami przewijania w jednej osi, co poprawia zachowanie elementów ograniczonych przez overflow: clip w jednej osi.
  • overscroll-behavior: ponieważ element może teraz być kontenerem z paskiem przewijania tylko w jednej osi, overscroll-behavior może już nie być wyzwalany w osi przyciętej, co może wpływać na niestandardowe efekty „przeciągnij, aby odświeżyć” lub odbicia. Ta zmiana zachowania jest zgodna z Firefoxem i Safari.
  • Przewijanie programowe: wywoływanie interfejsów API przewijania (np. Element.scrollTo()) w kontenerze z paskiem przewijania w jednej osi wymusza teraz ograniczenia przewijania programowego. Element nie będzie przewijać się programowo wzdłuż osi zdefiniowanej jako przycięta.
  • Minimalny rozmiar komórki w siatce i elastycznym układzie: w przypadku kontenerów z paskami przewijania w siatce i elastycznym układzie domyślny minimalny rozmiar (min-width: auto) jest zwykle ignorowany, aby komórki mogły dostosowywać się do dostępnego miejsca. Gdy w tej samej osi ustawisz overflow: clip, domyślny minimalny rozmiar zacznie działać, co może spowodować powiększenie kontenera elastycznego lub siatki.

Wykrywanie funkcji

Aby wykryć obsługę kontenerów z paskami przewijania w jednej osi, użyj reguły @supports named-feature() ze słowem kluczowym single-axis-scroll-container.

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

Jak omówiono w problemie CSSWG #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) jest tylko sprawdzaniem składni i nie wykrywa, czy przeglądarka prawidłowo obsługuje zmienione zachowania przewijania w jednej osi.

Aby przeprowadzić to sprawdzenie w JavaScript, użyj CSS.supports("named-feature(single-axis-scroll-container)").

Chcemy poznać Twoją opinię

Aby ocenić potencjalne problemy ze zgodnością, przeprowadziliśmy testy na 190 stronach. Z tej analizy wynika, że zmiany nie powodują żadnych poważnych problemów.

Ponieważ jednak kontenery z paskami przewijania w jednej osi zasadniczo zmieniają sposób oceniania kontekstów przewijania, przeprowadzamy szersze testy. Prosimy o przetestowanie witryn i aplikacji internetowych w niestabilnych kanałach Chrome, aby pomóc w zidentyfikowaniu wszelkich przypadków brzegowych, zanim ta funkcja zostanie udostępniona w stabilnej wersji.

Jeśli coś zacznie się psuć lub zauważysz nieoczekiwane zachowanie przewijania, proszę zgłoś błąd w Chromium.