html - 什么是 css 滚动行为属性？

Question

我最近注意到一个 scroll-behavior 属性，我可以在我的 css 中指定它。它只能采用 2 个属性:inherit 和 initial。我以前从未听说过/见过它，所以我试着看看它。问题是所有链接都在解释有关 overflow 属性的不同内容。

然后 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;
}

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

Answer 1

注意到它也在我的 Chrome Inspector 中弹出，这让我看到了这篇文章...

什么是滚动行为？

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

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

真正的问题是我们何时可以在边缘浏览器中使用此属性？目前，它可以被 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 以查看通过 anchor 标记的即时滚动当前如何通过 DOM 工作的实现 - http://jsfiddle.net/timcasonjr/5t0so7n7/3/