scroll-state() w CSS

Podobnie jak zapytania kontenera, ale w przypadku zablokowanych, przyciśniętych i przepełnionych zapytań.

Adam Argyle

Data publikacji: 15 stycznia 2025 r.

Wersja Chrome 133 rozwija zapytania dotyczące kontenera, wprowadzając zapytania dotyczące stanu przewijania. Stan zarządzany przez przeglądarkę w przypadku przyklejonego pozycjonowania, punktów przyciągania przy przewijaniu i elementów przewijanych można teraz zapytać i dostosować z poziomu CSS.

Omówienie

Przed wykonaniem zapytań dotyczących stanu przewijania musisz użyć kodu JavaScript, aby określić, czy element jest zablokowany, przytwierdzony czy przewijalny. Teraz istnieje bardziej wydajna metoda w ramach ścieżki standardów, która pozwala poznać te informacje i odpowiednio się do nich dostosować. Jest też nowy sposób uruchamiania animacji, który umożliwia odblokowanie animacji uruchamianych przez przewijanie w CSS.

Oto przegląd zapytań stanu dostępnych w Chrome 133:

Stan utknięty:
Zmiana stylu, gdy element jest przyklejony do krawędzi.
Stan spakowany:
Zmiana stylu po przyciągnięciu elementu do osi.
Stan przewijania:
Zmiana stylu, gdy element jest przepełniony.

Dobra wiadomość jest taka, że wszystko, czego się nauczyłeś/nauczyłaś z zapytań dotyczących kontenera, przyda Ci się przy pracy z zapytaniami dotyczącymi stanu przewijania.

Niezbadane są też obszary między animacjami wywoływanymi przez przewijanie a zapytaniami do kontenera stanu przewijania. Musimy eksperymentować z czasem i kontekstem, aby ustalić, czy lepiej sprawdzi się animacja wywoływana przez przewijanie czy animacja stanu wywoływana przez przewijanie. Następujący film i prezentacja pokazują, jak wygląda ta sytuacja: porównujemy animację wywoływaną przez przycisk z animacją wywoływaną przez przewijanie.

(po lewej) animacja wywoływana przez scroll-state(), (po prawej) animacja sterowana przez przewijanie
https://codepen.io/web-dot-dev/pen/emOrBaV

Pierwsze zapytanie dotyczące stanu przewijania

Pierwszym krokiem jest zdefiniowanie kontenera przy użyciu nowej wartości właściwości container-type. Podobnie jak w przypadku zapytania dotyczącego kontenera, element, którego dotyczy zapytanie, to ten, któremu przypisujesz wartość container-type i opcjonalnie container-name. Za pomocą zapytań o stan przewijania możesz określić element, który jest przyciągany, zablokowany lub ma przepełnienie container-type: scroll-state.

.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;
}

Drugim krokiem jest wybranie elementu podrzędnego tego kontenera, który będzie reagować na stan. W przypadku zapytań dotyczących kontenera nie może to być ten sam element, który ma element container-type.

.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;

  > nav {
    @container scroll-state(stuck: top) {
      background: Highlight;
      color: HighlightText;
    }
  }
}

Trzeci krok to wypróbowanie funkcji. W tym przykładzie kodu CSS tło będzie czerwone, gdy element .stuck-top przykleja się do góry w miejscu 0. Dzięki kilku dodatkowym wierszom w CSS, które już napisaliśmy, oraz dodatkowemu elementowi zawierającym stan przeglądarki nasze komponenty są znacznie bardziej inteligentne w swoim otoczeniu.

https://codepen.io/web-dot-dev/pen/ByBxpwR

Stopniowe ulepszanie

Za pomocą reguły @supports i zagnieżdżania możesz dodać stopniowe ulepszanie lub użycie funkcji warunkowych w zaledwie kilku dodatkowych liniach kodu:

.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;

  @supports (container-type: scroll-state) {
    > nav {
      @container scroll-state(stuck: top) {
        background: Highlight;
        color: HighlightText;
      }
    }
  }
}

Jeśli animujesz elementy na stronie za pomocą zapytań o stan przewijania, pamiętaj też o używaniu @media (prefers-reduced-motion: no-preference) {} w przypadku animacji.

Przykłady zastosowania

Zablokowane

Może ta sekcja powinna nazywać się „Kłopotliwe sytuacje”? To niewielka kolekcja przypadków użycia trwałego stanu oraz dodatkowa sekcja z pomysłami, które należy wdrożyć.

@container scroll-state(stuck: top) {}
@container scroll-state(stuck: bottom) {}

Pełna lista składni

Dodawanie cienia, gdy element jest zablokowany

Jednym z najczęstszych zastosowań zablokowanego zapytania jest dodanie do paska nawigacyjnego box-shadow, gdy jest on zablokowany, aby mógł unosić się nad treścią, którą pokrywa.

https://codepen.io/web-dot-dev/pen/GgKdryj 
.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;

  > nav {
    transition: box-shadow .3s ease;

    @container scroll-state(stuck: top) {
      box-shadow: var(--shadow-5);
    }
  }
}

Aktywowanie bieżącego nagłówka

Innym typowym scenariuszem jest podświetlenie elementu, który jest obecnie przyklejony. Na liście zespołów uporządkowanych alfabetycznie może to być bardzo przydatne i ułatwiające korzystanie z aplikacji.

https://codepen.io/web-dot-dev/pen/pvzVRaK 
.sticky-slide {
  dt {
    container-type: scroll-state;
    position: sticky;
    inset-block-start: 0;
    inset-inline: 0;

    > header {
      transition: 
        background .3s ease,
        box-shadow .5s ease;

      @container scroll-state(stuck: top) {
        background: hsl(265 100% 27%);
        box-shadow: 0 5px 5px #0003;
      }
    }
  }
}

Oto inny wariant, w którym nagłówki znajdują się obok elementów listy. Wiele możliwości

https://codepen.io/web-dot-dev/pen/azoGpGg

Przepełnienie pomysłów

Oto lista demo aplikacji z przypiętymi elementami, które mogą zainspirować Cię do dodania nieco pikanterii do demo lub usunięcia kodu JavaScript za pomocą zapytań stanu przewijania. Proponuję stworzyć taki, który Ci się podoba. Pomoże Ci to zapamiętać składnię i pomysły. 😏

Przyciągnięto

Dzięki zapytaniom o stan przyciętego elementu możemy częściowo odciążyć kod JavaScript i zdarzenia Snap, a zarządzanie nimi przekazać do kodu CSS.

@container scroll-state(snapped: x) {}
@container scroll-state(snapped: y) {}
@container scroll-state(snapped: inline) {}
@container scroll-state(snapped: block) {}

Pełna lista składni

Przypominamy, że jeśli pominęliście sekcję Pierwsze zapytanie dotyczące stanu przewijania, kontener zapytania snapa to element z elementem scroll-snap-align, a element, który może się dostosowywać, musi być podrzędnym tego elementu. Oznacza to, że do skonfigurowania tej funkcji potrzebne są 3 elementy:

a scroll container with `scroll-snap-type`
⤷ a snap target with both `scroll-snap-align` and `container-type: scroll-state`
    ⤷ a child of the snap target that can query the container for snap state

wizualnie wzmocnić przycięty element,

Jest to bardzo powszechne w przypadku środka uchwytu, aby wyróżnić lub pokazać element w środku. W tym przykładzie opinii użyto słowa kluczowego not, dzięki czemu wszystkie niesformatowane opinie mają niską przezroczystość, a sformatowana opinia jest w naturalnym stanie.

https://codepen.io/web-dot-dev/pen/NPKMdBX 
.demo {
  overflow: auto hidden;
  scroll-snap-type: x mandatory;

  > article {
    container-type: scroll-state;
    scroll-snap-align: center;

    @supports (container-type: scroll-state) {
      > * {
        transition: opacity .5s ease;

        @container not scroll-state(snapped: x) {
          opacity: .25;
        }
      }
    }
  }
}

wyświetlać podpis do przypiętego elementu.

To dobry przykład tego, jak zapytania o stan przewijania umożliwiają animację wywoływaną przez przewijanie. Jest to też dobry przykład sytuacji, w której stosowanie ograniczonego ruchu w CSS jest przydatne.

https://codepen.io/web-dot-dev/pen/XJrqpBG 
.demo {
  overflow-x: auto;
  scroll-behavior-x: contain;
  scroll-snap-type: x mandatory;

  > .card {
    container-type: scroll-state;
    scroll-snap-align: center;

    @supports (container-type: scroll-state) {
      @media (prefers-reduced-motion: no-preference) {
        figcaption {
          transform: translateY(100%);

          @container scroll-state(snapped: x) {
            transform: translateY(0);
          }
        }
      }
    }
  }
}

Animowanie elementów slajdu

Podczas wygłaszania prezentacji często animuje się elementy pokazu slajdów lub prezentacji. Wcześniej pisanie obserwatora kolizji było dość uciążliwe, ponieważ robiło tylko tyle, że ustawiało klasę na slajdzie. Teraz nie potrzebujemy kodu JavaScript.

https://codepen.io/web-dot-dev/pen/dPbeNqY 
html {
  scroll-snap-type: y mandatory;
}

section {
  container-type: scroll-state;
  scroll-snap-align: start;
  scroll-snap-stop: always;

  @supports (container-type: scroll-state) {
    @media (prefers-reduced-motion: no-preference) {
      > h1 {
        transition: opacity .5s ease, transform .5s var(--ease-spring-3);
        transition-delay: .5s;
        opacity: 0;
        transform: scale(1.25);

        @container scroll-state(snapped: block) {
          opacity: 1;
          transform: scale(1);
        }
      }
    }
  }
}

Możesz zauważyć, że wszystkie zapytania o stan usługi porównywania cen, które zostały przycięte, działają jak scrollsnapchanging, a nie jak scrollsnapchange. Dzięki temu możesz wyświetlić wizualne informacje zwrotne dotyczące elementu. Jeśli jest zbyt szybki, rozważ użycie zdarzenia JavaScript.

Przewijanie

Zapytanie o stan przewijania będzie bardzo przydatne do wyświetlania wizualnych elementów interfejsu, które wskazują, kiedy obszar przewijania jest dostępny. Do czasu wprowadzenia zapytań o stan przewijania trudno było poznać te informacje. 

@container scroll-state(scrollable: top) {}
@container scroll-state(scrollable: right) {}
@container scroll-state(scrollable: bottom) {}
@container scroll-state(scrollable: left) {}

Pełna lista składni

Wskazanie przewijania za pomocą cieni

Istnieje znany trik CSS Lea Verou, który wykorzystuje background-attachment: local do uzyskania podobnego efektu, a także sposób na wykonanie tego za pomocą animacji sterowanej przez przewijanie. Każda technika ma swoje wady i zalety. Musimy więc sprawdzić, kiedy i gdzie dana technika jest najbardziej odpowiednia.

W tym przykładzie użyto jednego elementu przyklejonego, który zajmuje całą szerokość ekranu. Gradient u góry i gradient u dołu mają przezroczystość animowaną za pomocą @property, gdy ma zastosowanie zapytanie o kontekstowy stan przewijania: @container scroll-state(scrollable: top).

Zwróć też uwagę, że jest to pierwszy kontener, który jest zarówno kontenerem size, jak i scroll-state.

https://codepen.io/web-dot-dev/pen/OPLZWBj 
.scroll-container {
  container-type: scroll-state size;
  overflow: auto;

  &::after {
    content: " ";

    background: var(--_shadow-top), var(--_shadow-bottom);
    transition: 
      --_scroll-shadow-color-1-opacity .5s ease,
      --_scroll-shadow-color-2-opacity .5s ease;

    @container scroll-state(scrollable: top) {
      --_scroll-shadow-color-1-opacity: var(--_shadow-color-opacity, 25%);
    }

    @container scroll-state(scrollable: bottom) {
      --_scroll-shadow-color-2-opacity: var(--_shadow-color-opacity, 25%);
    }
  }
}

Prośba o wskazanie strzałki

Czasami wyświetlenie strzałki może pomóc użytkownikom odkryć, że dany obszar można przewijać. Zwykle wskazują one kierunek, w jakim można przewijać, i znikają, gdy nie są już potrzebne. Możesz to zrobić za pomocą tego kodu.

https://codepen.io/web-dot-dev/pen/OPLZWBj 
@container scroll-state((scrollable: top) or (not (scrollable: bottom))) {
  translate: 0 calc(100% + 10px);
}

@container scroll-state((scrollable: top) and (not (scrollable: bottom))) {
  translate: 0 calc(100% + 10px);
  rotate: .5turn;
}

Wróć do góry strony

Inną popularną interakcją w stanie przewijania jest przycisk „przewiń do góry”. Poniższy kod powoduje, że przycisk przewijania do góry znika, gdy nie ma możliwości przewijania w górę.

To rozwiązanie jest nieco odwrócone, ale pozwala zmniejszyć ilość kodu CSS. Przycisk jest widoczny, więc musisz go ukryć, gdy nie można już przewijać w górę.

https://codepen.io/web-dot-dev/pen/OPLZWBj 
@container not scroll-state(scrollable: top) {
  translate: 0 calc(100% + 10px);
}

dalsze badania;

Jeśli chcesz dowiedzieć się więcej, zapoznaj się z tymi materiałami, w których znajdziesz informacje o specyfikacji oraz inne przydatne artykuły na ten temat: