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