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