We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

概要

当由于导航或者CSSOM滚动api产生滚动时,CSS属性 scroll-behavior 为一个滚动框指定滚动行为,其他任何的滚动,例如那些由于用户行为而产生的滚动,不受这个属性的影响。在根元素中指定这个属性时,它反而适用于视窗。

用户代理可能会忽略这个属性。

初始值auto
适用元素scrolling boxes
是否是继承属性
适用媒体visual
计算值as specified
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

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

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

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

输出

规范

规范 状态 备注
CSS Object Model (CSSOM) View Module
scroll-behavior
Working Draft Initial specification

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

功能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基础支持 (Yes)[1] 36 (36) 未实现 (Yes)[1] 未实现
功能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基础支持 未实现 36 (36) 未实现 未实现 未实现

[1] 通过启用“Smooth Scrolling”或者“Enable experimental web platform features”在Chrome,Opera中支持

文档标签和贡献者

此页面的贡献者: Pada, lunix01
最后编辑者: Pada,