Modern CSS allows us to detect scroll behavior and apply styles without using JavaScript. In this example, we check whether the .container
element is scrollable. By using @keyframes
and animation-timeline
, we track the scroll state.
If the element is scrollable, the background turns green #008000
; otherwise, it turns red #FF0000
.
/* Keyframes animation to detect scroll status */
@keyframes detectScroll {
from,
to {
--scroll-status: /* A custom variable to check the scroll status */
}
}
.container {
/* Apply scroll animation */
animation: detectScroll linear;
animation-timeline: scroll(self); /* Bind the animation to the container's scroll behavior */
/* Define background color based on scroll status */
--bg-scrollable: var(--scroll-status) #008000; /* Green if scrollable */
--bg-scrollable-hide: #FF0000; /* Red if not scrollable */
background-color: var(--bg-scrollable, var(--bg-scrollable-hide)); /* Set the background color */
}
This method provides a simple and efficient way to give users visual feedback. CSS is now capable of handling interactions like scrolling!