scroll-behavior property accepts the following values:
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:
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
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.