什么是CSS滚动行为属性？

我最近注意到一个scroll-behavior我可以在 css 中指定的属性。它只能有 2 个属性：inherit and initial。我以前从未听说过/见过它，所以我尝试看看它。问题是所有的链接都在解释不同的事情overflow财产。

Then 我尝试测试一下.

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

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

问题是我看不出有什么区别。那么它有什么作用呢？

注意到它也出现在我的 Chrome 检查器中，这让我看到了这篇文章......

什么是滚动行为？

具体称为 CSSOM-View 'Scroll-Behavior' 属性，创建 css 属性是为了在 CSS 中集成更多灵活性以实现 DOM 项滚动。大多数为网站构建的“滚动到”选项通常构建在 JS 库或插件上。就像其他人提到的那样，这是发布文档 -http://dev.w3.org/csswg/cssom-view/#scrolling

当前采用的 DOM 滚动行为由锚标记设置（例如：Click Me）。当这个 CSS 属性在所有浏览器中被完全采用并正确实现时（查看此讨论：https://groups.google.com/forum/#!topic/mozilla.dev.platform/mrsNyaLj3Ig）。您将能够将“即时”锚标记滚动切换为“平滑”滚动。

真正的问题是我们什么时候可以在边缘浏览器中使用此属性？目前，它已被 Firefox 和 Chrome 识别，但就研究而言，该属性尚未“活跃”。

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>

查看 JSFiddle 以了解当前通过锚标记进行即时滚动如何通过 DOM 进行工作的实现 -http://jsfiddle.net/timcasonjr/5t0so7n7/3/