@keyframes detect-scroll { from, to { --can-scroll: ; } } .container { animation: detect-scroll linear; animation-timeline: scroll(self); --bg-if-can-scroll: var(--can-scroll) lime; --bg-if-cant-scroll: red; background: var(--bg-if-can-scroll, var(--bg-if-cant-scroll)); } .container { height: 250px; width: 250px; overflow-y: auto; animation: anim linear; animation-timeline: scroll(self); } @keyframes anim { from { color: hotpink; } to { color: lime; } } .container { height: 250px; width: 250px; overflow-y: auto; --can-scroll: initial; /* initial = false */ animation: detect-scroll; animation-timeline: scroll(self); --color-if-can-scroll: var(--can-scroll) lime; --color-if-cant-scroll: red; outline: 10px dotted var(--color-if-can-scroll, var(--color-if-cant-scroll)); } @keyframes…