CSS scroll-behavior选项卡平滑滚动测试实例页面

回到相关文章 »

展示

选项卡1 选项卡2 选项卡3

我是选项卡1对应的美女

我是选项卡2对应的美女

我是选项卡3对应的美女

代码

CSS代码：

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

HTML代码：

<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">
        <p>我是选项卡1对应的美女</p>
        <img src="./mm1.jpg" />
    </div>
    <div class="content"><input id="tab2">
        <p>我是选项卡2对应的美女</p>
        <img src="./mm2.jpg" />
    </div>
    <div class="content"><input id="tab3">
        <p>我是选项卡3对应的美女</p>
        <img src="./mm3.jpg" />
    </div>
</div>