CSS overflow-anchor

The overflow-anchor CSS property specifies under what circumstances a scrolling box (container) is scrolled when the user reaches the boundary of the scrollport. This property is useful for ensuring that content stays in view when scrolling.

The overflow-anchor property specifies if an element is used as an anchor to control the scrolling of the scroll container. The anchor is used when the scroll container is scrolled either by the user, by the application, or by an anchor itself.

Here is an example to demonstrate the use of overflow-anchor property:

Result:


    .container {
      height: 200px;
      overflow-y: scroll;
      overflow-anchor: none;
    }

    .scroll-content {
      height: 400px;
      background-color: #f9f9f9;
    }

In the example above, we have a container with a fixed height and vertical scrolling enabled. The overflow-anchor property is set to none which means that the scroll position will not be anchored to any specific element.

By changing the value of overflow-anchor property, you can control how the scrolling behaves when the user reaches the boundary of the scrollport.