What is css scroll-behavior property?

Question

I have recently noticed a scroll-behavior property that I can specify in my css. It can take only 2 properties: inherit and initial. I have never heard/seen it before, so I tried to look at it. The problem is that all the links are going into explaining different things about overflow property.

Then I tried to test it.

<div id="scroll">
    <div id="inside">
</div>

#scroll{
    width: 100px;
    height: 500px;
    scroll-behavior: inherit;
    overflow: auto;
    border: 2px solid black;
}
#inside{
    height : 1000px;
}

The problem is that I see no difference. So what does it do?

Answer 1

Noticed it pop up in my Chrome Inspector as well, which lead me to this post...

What is the Scroll-Behavior?

Specifically referred to as CSSOM-View 'Scroll-Behavior' property, the css property was created to integrate more flexibility in CSS for DOM item scrolling. Most 'scroll-to' options that are built for websites are typically built on a JS library or plugin. Like others have mentioned, here is the release documentation - http://dev.w3.org/csswg/cssom-view/#scrolling

The current adopted scroll-behavior of the DOM is set to by anchor tags (example: Click Me). When this CSS property is fully adopted in all browsers, and correctly implemented (Check out this discussion : https://groups.google.com/forum/#!topic/mozilla.dev.platform/mrsNyaLj3Ig). You will be able to toggle the 'instant' anchor tag scroll to more of to a 'smooth' scroll.

The real question is when we this property be available in edge browsers? Currently, it is recognized by Firefox & Chrome, but the property is not 'Active' as far as research has gone.

nav{ float:left }

#scroll {
  width: 350px;
  height: 500px;
  scroll-behavior: smooth;
  overflow: scroll;
  border: 2px solid black;
}

#inside1 {
  height: 1000px;
  background-color: blue;
}

#inside2 {
  height: 1000px;
  background-color: orange;
}

#inside3 {
  height: 1000px;
  background-color: red;
}

<nav>
  <a href="#inside1">#1</a>
  <a href="#inside2">#2</a>
  <a href="#inside3">#3</a>
</nav>

<div id="scroll">
  <div id="inside1"></div>
  <div id="inside2"></div>
  <div id="inside3"></div>
</div>

Check out the JSFiddle to see the implementation of how the instant scroll via anchor tags currently works through the DOM - http://jsfiddle.net/timcasonjr/5t0so7n7/3/