Scrolling and Scrollbars

Use scroll-behaviour to enable smooth scrolling when scrolling is triggered by an event (e.g. clicking an in-document anchor link) [MDN].

It is possible to detect whether an element can be scrolled or not using CSS [bram.us].

Scrolling velocity and scrolling direction can be detected using CSS [bram.us].

Scroll Indicator

Especially with overlay scrollbars, it may be a good idea to add a custom scroll indicator so that users know that there is more content outside the viewport. There are several ways to implement something like that. [daverupert.com, lea.verou.me, ingmarh/scroll-shadow-element]

Scroll-driven Animations

Extends the Web Animation API and CSS Animations with effects based on the current scroll position (Scroll Timeline) or the position of an element in the scrollport (View Timeline).

• developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll-driven_animations
• w3.org/TR/scroll-animations-1
• developer.chrome.com/articles/scroll-driven-animations
• developer.mozilla.org/en-US/blog/scroll-progress-animations-in-css
• scroll-driven-animations.style

For browsers that do not support scroll-driven animations, there is a polyfill available [flackr/scroll-timeline].

Scroll-driven Animations can be used for interesting effects (which may not even be related to scrolling or animation) [kizu.dev, kizu.dev, kizu.dev, kizu.dev, johannesodland/state].