🖥 Определение переполнения/скроллбара используя современный 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