Заметки разработчика: “🖥 Определение переполнения/скроллбара используя современный CSS Хотит…”

🖥 Определение переполнения/скроллбара используя современный CSS

Хотите определить, есть ли у элемента переполнение или он прокручивается? Это возможно с помощью анимации, управляемой прокруткой! Кроме того, эту информацию можно хранить в переменной на уровне :root и делать с ней всё что угодно (например, стилизовать элементы на странице).

:root {
  timeline-scope: --scroll;
  animation: --scroll forwards;
  animation-timeline: --scroll;
  container-name: --scroll;
}
.box { /* соответствующий элемент */
  overflow: auto; /* или hidden */
  scroll-timeline: --scroll;
}
@keyframes --scroll {
  0%,to{--scroll: 1;}
}
@container --scroll style(--scroll: 1) {
  /* CSS, когда .box переполнен 
     можно нацелиться на любой элемент на странице!
  */
}
/* Да, вы можете использовать --scroll везде! */

Измените размер элемента .box в демонстрационном примере на 👩‍💻 CodePen и посмотрите на волшебство! (пока только для 👩‍💻)

Использование запроса стиля не обязательно, и можно использовать более простую версию, если необходимо нацелиться на соответствующий элемент.

.box {
  overflow: auto; /* или hidden */
  animation: scrolling forwards;
  animation-timeline: scroll(self);
}
@keyframes scrolling {
  0%,to{
    /* CSS, применяемый к .box, когда в нём есть переполнение */
  }
}

Или дочерний элемент

.box {
  overflow: auto; /* или hidden */
}
.box .child {
  animation: scrolling forwards;
  animation-timeline: scroll(); /* он будет считать, что у предка overflow: auto/hidden  */
}
@keyframes scrolling {
  0%,to{
    /* CSS, применяемый к .child, когда у .box есть переполнение */
  }
}

Пример на 👩‍💻 CodePen

🔗Источник: Overflow/scrollbar detection using modern CSS

📱 @dev_notes_ru

#CSS #tips