What is css scroll-behavior property? - html

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>
#1
#2
#3
</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/