html – 什么是css scroll-behavior属性？

概述我最近注意到了一个我可以在css中指定的滚动行为属性.它只需要2个属性：inherit和initial.我以前从未听过/见过它,所以我试着看一下.问题是所有的链接都在解释有关溢出属性的不同内容. 然后I tried to test it. <div id="scroll"> <div id="inside"></div>#scroll{ width: 100px; h 我最近注意到了一个我可以在CSS中指定的滚动行为属性.它只需要2个属性：inherit和initial.我以前从未听过/见过它,所以我试着看一下.问题是所有的链接都在解释有关溢出属性的不同内容.

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

问题是,我认为没有区别.那它是做什么用的？

解决方法 注意到它也出现在我的Chrome Inspector中,这引导我发布这篇帖子……

什么是滚动行为？

特别称为CSSOM-VIEw’Scroll-Behavior’属性,创建了CSS属性以集成更多的CSS项目滚动灵活性.大多数为网站构建的“滚动”选项通常建立在Js库或插件上.像其他人提到的那样,这里是发布文档 – http://dev.w3.org/csswg/cssom-view/#scrolling

当前采用的DOM的滚动行为由锚标签设置(例如：单击我).当所有浏览器完全采用此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/实现的实现

总结

以上是内存溢出为你收集整理的html – 什么是css scroll-behavior属性？全部内容，希望文章能够帮你解决html – 什么是css scroll-behavior属性？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。