由于接触过各种后台管理平台开发,我们的开发界面一般左侧导航栏,右侧内容区域。在左侧呢一旦超出高度在不同的浏览器就会显示滚动条。严重影响页面美观。
在这里呢主要是讲的css实现
PC 端无滚动条滚动样式。下面直接上代码:
- html:
<div class="box-wrapper">
<div class="box">
<div class="item">Home <span class="caret"></span></div>
<div class="item">Phthon</div>
<div class="item">React</div>
<div class="item">Vue <span class="caret"></span></div>
<div class="item">Java</div>
<div class="item">Html5</div>
<div class="item">Javascript</div>
<div class="item">VuePress</div>
<div class="item">Bootstrap</div>
<div class="item">Jquery</div>
<div class="item">Home</div>
<div class="item">Order</div>
<div class="item">Session</div>
<div class="item">Preety</div>
<div class="item">Java</div>
<div class="item">Html5</div>
<div class="item">Javascript</div>
<div class="item">VuePress</div>
<div class="item">Bootstrap</div>
<div class="item">Jquery</div>
</div>
</div>
- scss:
.box-wrapper {
width: 100px;
background: #009688;
position: fixed;
top: 0;
left: 0;
bottom: 0;
overflow: hidden;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, .8);
}
.box {
height: 100%;
width: calc(100% + 7px);
overflow-y: auto;
text-align: center;
color: #f2f2f2;
}
.box .item {
height: 40px;
line-height: 40px;
cursor: pointer;
position: relative;
&:hover {
background: #ed686f;
color: #fff;
.caret {
transform: rotateZ(180deg);
}
}
& .caret {
width: 0;
heihgt: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid #f2f2f2;
display: inline-block;
position: absolute;
top: 17px;
right: 10px;
transition: all .2s;
}
}
- 效果展示:
最后总结:其中的原理是外层限制了宽度并且设置超出隐藏,然而我们在内层宽度增加17px,滚动条则显示在增加的17px里面。所以有滚动条的时候就不会显示出来。~~