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