scroll-behavior屬性
當用戶手動導航或者 CSSOM scrolling API 觸發滾動操作時，CSS 屬性 scroll-behavior 為一個滾動框指定滾動行為，當用戶通過鼠標滑輪滾動或者手機觸屏滾動，不受這個屬性的影響。在根元素中指定這個屬性時，它反而適用於視窗。
scroll-behavior屬性包括： smooth | auto;
auto: 默認值，表示滾動框立即滾動到指定位置。 smooth 表示允許滾動時采用平滑過渡，而不知直接滾動到相應位置，最常見的比如回到頂部按鈕和錨點。
scroll-behavior瀏覽器支持情況：
- 通過錨點的方式實現，代碼如下：
html代碼：
1 <div class="tab-box"> 2 <div class="tab-t"> 3 <a class="labels" href="#tab1">選項卡1</a> 4 <a class="labels" href="#tab2">選項卡2</a> 5 <a class="labels" href="#tab3">選項卡3</a> 6 </div> 7 <div class="tab-body"> 8 <div class="content" id="tab1"> 9 <p>我是選項卡1</p> 10 </div> 11 <div class="content" id="tab2"> 12 <p>我是選項卡2</p> 13 </div> 14 <div class="content" id="tab3"> 15 <p>我是選項卡3</p> 16 </div> 17 </div> 18 </div>
less代碼：1 .tab-box{ 2 margin: 20px; 3 .labels { 4 width: 100px; 5 margin-right: -1px; 6 border: 1px solid #ccc; 7 border-bottom: 0; 8 padding-top: 5px; 9 padding-bottom: 5px; 10 background-color: #eee; 11 text-align: center; 12 display: inline-block; 13 text-decoration: none; 14 color:#555; 15 } 16 .tab-body { 17 height: 200px; 18 border: 1px solid #ccc; 19 scroll-behavior: smooth; 20 overflow: hidden; 21 .content { 22 height: 100%; 23 padding: 0 20px; 24 position: relative; 25 overflow: hidden; 26 input { 27 position: absolute; 28 top: 0; 29 height: 100%; 30 width: 100px; 31 border: 0; 32 padding: 0; 33 margin: 0; 34 clip: rect(0 0 0 0); 35 } 36 } 37 } 38 }
- 通過label和表單元素得到焦點的特性實現，代碼如下：
html代碼：
1 <div class="tab-box"> 2 <div class="tab-t"> 3 <label class="label" for="tab1">選項卡1</label> 4 <label class="label" for="tab2">選項卡2</label> 5 <label class="label" for="tab3">選項卡3</label> 6 </div> 7 <div class="tab-body"> 8 <div class="content"><input id="tab1" type="text"> 9 <p>我是選項卡1</p> 10 </div> 11 <div class="content"><input id="tab2" type="text"> 12 <p>我是選項卡2</p> 13 </div> 14 <div class="content"><input id="tab3" type="text"> 15 <p>我是選項卡3</p> 16 </div> 17 </div> 18 </div>
less代碼：
1 .tab-box{ 2 margin: 20px; 3 .label { 4 width: 100px; 5 margin-right: -1px; 6 border: 1px solid #ccc; 7 border-bottom: 0; 8 padding-top: 5px; 9 padding-bottom: 5px; 10 background-color: #eee; 11 text-align: center; 12 display: inline-block; 13 } 14 .tab-body { 15 height: 200px; 16 border: 1px solid #ccc; 17 scroll-behavior: smooth; 18 overflow: hidden; 19 .content { 20 height: 100%; 21 padding: 0 20px; 22 position: relative; 23 overflow: hidden; 24 input { 25 position: absolute; 26 top: 0; 27 height: 100%; 28 width: 100px; 29 border: 0; 30 padding: 0; 31 margin: 0; 32 clip: rect(0 0 0 0); 33 } 34 } 35 } 36 }