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'Scroll-Behavior'属性，创建了css属性，以便在CSS项目滚动中集成更多的CSS灵活性。大多数为网站构建的“滚动”选项通常建立在JS库或插件上。与其他人提到的一样，这里是发布文档 - http://dev.w3.org/csswg/cssom-view/#scrolling

当前采用的DOM滚动行为由锚标记设置（例如：单击我）。当所有浏览器完全采用此CSS属性并正确实现时（请参阅此讨论：https://groups.google.com/forum/#!topic/mozilla.dev.platform/mrsNyaLj3Ig）。您将能够将“即时”锚标签滚动切换为更多“平滑”滚动。

真正的问题是当我们在边缘浏览器中使用此属性时？目前，它被Firefox＆amp; 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以查看当前通过锚标签进行即时滚动的实现方式 - http://jsfiddle.net/timcasonjr/5t0so7n7/3/

什么是css scroll-behavior属性？

1 个答案:

什么是滚动行为？