una.im | Направленный CSS с scroll-state(scrolled)

В Chrome 144 появляется новая мощная функция CSS — запрос scroll-state(scrolled), который позволяет применять стили в зависимости от последнего направления прокрутки пользователя. Это открывает множество новых возможностей для создания динамичных и адаптивных пользовательских интерфейсов. Запрос scrolled является новейшим дополнением к контейнерным запросам scroll-state(), которые также включают stuck (для прилипших элементов), snapped (для элементов, зафиксированных на оси) и scrollable (для элементов с переполнением).

Для использования любого запроса состояния прокрутки необходимо сначала установить container-type: scroll-state на родительском элементе, например:

html {
  container-type: scroll-state;
}

После этого можно использовать @container scroll-state(<type>: <value>) для применения стилей, как и с другими @container запросами. Значение scrolled принимает такие направления, как top, right, bottom, left, а также логические эквиваленты (block-start, inline-start) и оси (x, y).

Одним из ярких примеров использования является динамическое скрытие/показ заголовка или навигационной панели. Традиционный паттерн "hidey-bar" (скрытие панели при прокрутке вниз и ее появление при прокрутке вверх) теперь легко реализуется с помощью чистого CSS:

@container scroll-state(scrolled: bottom) {
  .header {
    transform: translateY(-100%); /* Скрыть при прокрутке вниз */
  }
}

@container scroll-state(scrolled: top) {
  .header {
    transform: translateY(0); /* Показать при прокрутке вверх */
  }
}

Автор статьи демонстрирует вариант с position: sticky, который позволяет улучшить существующий дизайн без изменения поведения для браузеров без поддержки новой функции. В этом случае навигационная панель становится липкой и анимируется, скрываясь при прокрутке вниз и возвращаясь при прокрутке вверх. При этом для старых браузеров она остается статичной, занимая свое обычное место. Эта техника является прекрасным примером прогрессивного улучшения, так как неподдерживаемые браузеры просто игнорируют новые правила внутри @container.

Другой интересный пример — направленная анимация появления элементов, где направление анимации (например, slide-up или slide-down) меняется в зависимости от направления прокрутки. Это создает более естественное и интуитивное взаимодействие, делая пользовательский интерфейс более отзывчивым. В целом, scroll-state(scrolled) предоставляет мощный инструмент для создания более динамичных и контекстно-зависимых веб-интерфейсов с минимальным использованием JavaScript.

Оригинал статьи: una.im | Directional CSS with scroll-state(scrolled)