CSS scroll-behavior

The scroll-behavior property in CSS is used to specify the scrolling behavior for a scrolling box when scrolling is triggered by the navigation or CSSOM scrolling API.

By default, when a user triggers a scroll event, the browser jumps straight to the target location. By using the scroll-behavior property, you can control the smoothness of the scroll behavior, making it more visually appealing to the user.

The scroll-behavior property accepts two values:

• auto: This is the default value and the browser handles the scroll behavior.
• smooth: This value enables smooth scrolling, making the transition from one point to another more visually pleasant.

Example:

    <style>
      .scrollable {
        height: 200px;
        overflow-y: scroll;
        scroll-behavior: smooth;
      }
    </style>

    <div class="scrollable">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris suscipit ligula in ultricies euismod.</p>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
      ...
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris suscipit ligula in ultricies euismod.</p>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    </div>
  

In the example above, we have a div element with the class scrollable which has a fixed height and vertical scroll. The scroll-behavior: smooth; property is applied to this element to enable smooth scrolling when the user scrolls within the box.

Try experimenting with the scroll-behavior property on different elements to see how it affects the scrolling behavior in your website.