Definition
The scroll-behavior CSS property is used to control the scrolling behavior of a container when navigating to a different part of the document using anchors, JavaScript scrolling, or certain CSS properties like scrollIntoView().
The scroll-behavior property accepts the following values:
-
auto: This is the default value. The container scrolls smoothly to the target position when using navigation methods like anchors or JavaScript scrolling. If the browser doesn’t support smooth scrolling, it falls back to the default abrupt scrolling behavior. -
smooth: The container scrolls smoothly to the target position, even if the browser doesn’t natively support smooth scrolling. This ensures a consistent smooth scrolling experience across different browsers.
Here’s an example:
.container {
scroll-behavior: smooth;
}
In this example, the .container class sets the scroll-behavior property to smooth. When navigating to different parts of the document within this container, the scrolling motion will be smooth and animated.
It’s important to note that the scroll-behavior property affects the scrolling behavior within the container it is applied to. If you want to apply smooth scrolling to the entire document, you would set it on the html or body elements.
The scroll-behavior property provides an easy way to control the scrolling experience and create smooth transitions when moving within a document. It can enhance user experience and improve the overall feel of your website or application.