CSS 属性 scroll-behavior 滚动行为

scroll-behavior属性

当用户手动导航或者 CSSOM scrolling API 触发滚动操作时，CSS 属性 scroll-behavior 为一个滚动框指定滚动行为，当用户通过鼠标滑轮滚动或者手机触屏滚动，不受这个属性的影响。在根元素中指定这个属性时，它反而适用于视窗。

scroll-behavior属性包括： smooth | auto;

auto: 默认值，表示滚动框立即滚动到指定位置。
smooth 表示允许滚动时采用平滑过渡，而不知直接滚动到相应位置，最常见的比如回到顶部按钮和锚点。

scroll-behavior浏览器支持情况：

1. 通过锚点的方式实现，代码如下：

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

查看案例 demo

2. 通过label和表单元素得到焦点的特性实现，代码如下：

<div class="tab"><label class="label" for="tab1">选项卡1</label><label class="label" for="tab2">选项卡2</label><label class="label" for="tab3">选项卡3</label>
</div>
<div class="box"><div class="content"><input id="tab1" type="text"><p>我是选项卡1</p></div><div class="content"><input id="tab2" type="text"><p>我是选项卡2</p></div><div class="content"><input id="tab3" type="text"><p>我是选项卡3</p></div>
</div>

查看案例 demo