CSS Scrolling

Scrolling is one of the fundamental interaction elements of websites. CSS offers several options to define how content appears when it exceeds the display or a box size. In addition, modern browsers support smooth scrolling, which provides a better user experience.

Basic scroll handling

With the overflow property, we can control what happens when the content exceeds the size of its parent element. The values include visible (default), hidden, scroll, and auto. The scroll value ensures that the scrollbar is always visible, while auto only shows it when necessary.

In this example, we create a fixed-size box that contains enough text to require scrolling. With overflow: scroll, the scrollbar will always be visible.

Smooth scrolling

The scroll-behavior property allows us to set scrolling to happen smoothly when the user clicks on a link that points within the same page. This provides a much more pleasant user experience, especially on longer pages.

In this example, we place a link that points to a later part of the page. With scroll-behavior: smooth, the browser scrolls to the target element slowly with continuous motion.

Tips for scrolling

Customizing scrolling can help create a better user experience, but accessibility and performance should always be kept in mind.

• Use auto overflow so the scrollbar only appears when necessary.
• Smooth scrolling improves the experience, but remember to respect user preferences (e.g., prefers-reduced-motion).
• Avoid overly custom scroll solutions, as they may hurt performance and usability.