Mix in a Space Toggle or a Style Query, and you’ve got all you need to selectively style an element based on it being scrollable or not.
This solution has the added benefit that its a progressive enhancement: if the user has Javascript disabled, it will fall back to the CSS-only approach. The overflow-y property specifies whether to clip content, render a scroll bar, or display overflow content of a block-level element, when it overflows at the top and bottom edges.
Because Scroll-Driven Animations are only active when there is scrollable overflow, it is possible to use them as a mechanism to detect if an element can scroll or not. The CSS scroll-driven animations module provides functionality that builds on top of the CSS animations module and Web Animations API. Instead of that, we can use the snapping dynamic while the container is scrolled to the bottom and then disable it when the user scrolls up past a certain threshold. The scroll-behavior property accepts two values, which essentially toggle the smooth scrolling feature on and off. Scroll effects are a fantastic way to bring life and dynamism to your web projects.