scroll-behavior

The scroll-behavior property in CSS allows us to define whether the scroll location of the browser jumps to a new location or animates the transition when a user clicks a link that targets an anchored position within a scrolling box.

Deeper Explanation

Wait, wait, what's this scrolling box we speak of? It's an element with content that overflows its bounds.

See the Pen Scrolling Box by CSS-Tricks (@css-tricks) on CodePen.

Notice how the box in the demo above has a fixed height of 200px? Any content that exceeds that height is outside the bounds of the box and we've added overflow-y: scroll to make that additional content accessible with vertical scrolling. That is what we mean by a scrolling box.

Now let's say we add a navigation to the top of the box with each link targeting the three sections of content:

See the Pen Scrolling Box w/Nav by CSS-Tricks (@css-tricks) on CodePen.

Each link takes the user directly to the different sections of content inside of the scrolling box. By default, that transition between is an abrupt jump.

The jump between content is abrupt and sudden by default.

That sort of a jump can be jarring. That's where scroll-behavior comes in and allows us to set a smooth scrolling transition. This sort of thing used to take fancy Javascript but scroll-behavior will give us the ability to do that natively in CSS, once browser support improves.

The jump between content is animated in a smooth transition.

Syntax

.module {
  scroll-behavior: [ auto | smooth ];
}

Values

The scroll-behavior property accepts two values, which essentially toggle the smooth scrolling feature on and off.

  • auto (default): This value allows the abrupt jump between elements within the scrolling box.
  • smooth: True to its name, this value is the smooth animated transition between elements within the scrolling box.

Demo

The following demo will only work on Firefox 36+ at the time of this writing, but can also be viewed in Chrome and Opera for Windows and Linux with the experimental web platforms features flag enabled.

See the Pen Scrolling Box w/ `scroll-behavior` by CSS-Tricks (@css-tricks) on CodePen.

Browser Support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

ChromeOperaFirefoxIEEdgeSafari
614836NoNoNo

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
NoNoNoNo62No

More Information

This comment thread is closed. If you have important information to share, please contact us.
icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag