css3中的scroll-behavior属性

scroll-behavior属性

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

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

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

scroll-behavior浏览器支持情况：

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

    <div class="tab-box">
      <div class="tab-t">
          <a class="labels" href="#tab1">选项卡1</a>
          <a class="labels" href="#tab2">选项卡2</a>
          <a class="labels" href="#tab3">选项卡3</a>
      </div>
      <div class="tab-body">
          <div class="content" id="tab1">
              <p>我是选项卡1</p>
          </div>
          <div class="content" id="tab2">
              <p>我是选项卡2</p>
          </div>
          <div class="content" id="tab3">
              <p>我是选项卡3</p>
          </div>
      </div>
    </div>

   less代码：

    .tab-box{
      margin: 20px;
      .labels {
        width: 100px;
        margin-right: -1px;
        border: 1px solid #ccc;
        border-bottom:;
        padding-top: 5px;
        padding-bottom: 5px;
        background-color: #eee;
        text-align: center;
        display: inline-block;
        text-decoration: none;
        color:#555;
      }
      .tab-body {
          height: 200px;
          border: 1px solid #ccc;
          scroll-behavior: smooth;
          overflow: hidden;
        .content {
            height: 100%;
            padding: 0 20px;
            position: relative;
            overflow: hidden;
          input {
            position: absolute;
            top:;
            height: 100%;
            width: 100px;
            border:;
            padding:;
            margin:;
            clip: rect(0 0 0 0);
          }
        }
      }
    }

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

    <div class="tab-box">
      <div class="tab-t">
          <label class="label" for="tab1">选项卡1</label>
          <label class="label" for="tab2">选项卡2</label>
          <label class="label" for="tab3">选项卡3</label>
      </div>
      <div class="tab-body">
          <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>
    </div>

   less代码：

    .tab-box{
      margin: 20px;
      .label {
        width: 100px;
        margin-right: -1px;
        border: 1px solid #ccc;
        border-bottom:;
        padding-top: 5px;
        padding-bottom: 5px;
        background-color: #eee;
        text-align: center;
        display: inline-block;
      }
      .tab-body {
          height: 200px;
          border: 1px solid #ccc;
          scroll-behavior: smooth;
          overflow: hidden;
        .content {
            height: 100%;
            padding: 0 20px;
            position: relative;
            overflow: hidden;
          input {
            position: absolute;
            top:;
            height: 100%;
            width: 100px;
            border:;
            padding:;
            margin:;
            clip: rect(0 0 0 0);
          }
        }
      }
    }