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!