#cтатья дня

Почти три года назад у меня неплохо так бомбануло на тему недоделанности фишек в современном вебе.

Да, мне не очень нравятся статьи и посты на тему того, как скоро всем будет хорошо, надо лишь немножечко подождать. В итоге, нет, не немножечко. Ну, может, на срезе 20 лет... (спойлер: тоже не факт).

Ладно, сегодня я конкретно хочу поговорить о состоянии scrolled и stuck для контейнеров. Очевидно, scrolled — это когда мы прокрутили в какую-то сторону, а stuck — это когда при использовании position: sticky мы можем определить, закрепился элемент, или нет.

Я тут немного пропустил, но в Chrome 133 состояние stuck таки появилось:

.scroll-ancestor {
  container-type: scroll-state;
}

@container scroll-state(stuck: top) {
  .child-of-scroll-parent {
    /* Magic happens here! */
  }
}

Да, понятие контейнер было мной упомянуто не просто так — эта красота теперь часть контейнерных запросов. И с этим меня познакомила прекрасная статья от Брехта де Рёйте: https://utilitybend.com/blog/is-it-scrolled-is-it-not-lets-find-out-with-css-container-scroll-state-queries/

Так вот, суть-то в том, что в свежем Chrome 144 появилась и поддержка состояния scrolled, да-да, с указанием направления!

/* If the last scroll was UP, show the header */
@container scroll-state(scrolled: top) {
  .main-header {
    transform: translateY(0);
  }
}

Ну это ли не чудо? А если указать inline или block, можно скрыть/показать индикаторы возможности скролла вообще. То же касается и индивидуальных направлений.

Кстати, есть и статья на MDN.

Да, очень грустно, что Safari и Firefox пока не шевелятся, но это в принципе можно решить полифиллами. Главное, что направление задано.

Но бомбить от недоделанности новых фишек пока не перестало.

#css #scroll #state