滚动行为 | scroll-behavior

scroll-behavior

scroll-behavior由于导航或CSSOM滚动API，滚动发生时，CSS属性指定滚动框的滚动行为。任何其他滚动条，例如由用户执行的滚动条，都不受此属性的影响。在根元素上指定此属性时，它将应用于视口。

用户代理可能忽略此属性。

/* Keyword values */
scroll-behavior: auto;
scroll-behavior: smooth;

/* Global values */
scroll-behavior: inherit;
scroll-behavior: initial;
scroll-behavior: unset;

初始值	auto
适用于	滚动框
遗传	没有
媒体	visual
计算值	作为指定
动画类型	离散的
规范的顺序	形式语法定义的独特的非模糊顺序

语法

取值

auto滚动框会立即滚动。smooth滚动框在用户代理定义的时间段内使用用户代理定义的定时功能以平滑的方式滚动。用户代理应该遵循平台惯例（如果有的话）。

形式语法

auto | smooth

例

HTML

<nav>
  <a href="#page-1">1</a>
  <a href="#page-2">2</a>
  <a href="#page-3">3</a>
</nav>
<scroll-container>
  <scroll-page id="page-1">1</scroll-page>
  <scroll-page id="page-2">2</scroll-page>
  <scroll-page id="page-3">3</scroll-page>
</scroll-container>

CSS

a {
  display: inline-block;
  width: 50px;
  text-decoration: none;
}
nav, scroll-container {
  display: block;
  margin: 0 auto;
  text-align: center;
}
nav {
  width: 339px;
  padding: 5px;
  border: 1px solid black;
}
scroll-container {
  display: block;
  width: 350px;
  height: 200px;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
scroll-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 5em;
}

输出

规范

Specification	Status	Comment
CSS Object Model (CSSOM) View ModuleThe definition of 'scroll-behavior' in that specification.	Working Draft	Initial specification

浏览器兼容性

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	611	36 (36)	No support	(Yes)1	No support

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	No support	36 (36)	No support	No support	No support