隐藏滚动条主要有两个方法:8 }# J7 {2 M5 _* F8 S! Z
- 计算滚动条的宽度,将滚动条平移到显示区域以外的地方
- 使用::-webkit-scrollbar隐藏滚动条
) ]+ G5 s, J$ [$ l2 ?, [9 f 之前在网上看到与人使用三个容器将其包裹起来,第二层的容器在使用webkit-scrollbar隐藏滚动条。这种方式个人感觉有点多次一举,还不如直接使用-webkit-scrollbar进行隐藏。! F6 O' [8 ^* i0 \: s; Q
接下来我们依次来看看具体的实现代码吧?
/ [5 \ u" s# ^2 @7 f1.计算滚动条并隐藏- ?) [( ?7 A/ W4 @1 G( c
对于这个方法,我们将其分为两个部分,第一个就是html,如下所示:
7 D9 Y' L8 k% H0 u; }1 r6 P, A<div class="container">
<div class="sub-container">
人步入老年,越接近人生的终点,就越对已经过去的往事产生怀旧和留恋感,甚至对已经烟消云散之事仍泛起情感的涟漪,这是许多老年人都想写部回忆录的原因。赶在人生落幕之前,自己给自己一个满意的台词。
</div>
</div> css部分如下所示:% B7 ~" y' l& F. U0 e4 q5 o: |
.container{
width: 100px;
height: 200px;
position: relative;
overflow: hidden;
}
.sub-container{
position: absolute;
left: 0;
top: 0;
right: -17px;/*主要代码计算滚动条的宽度,将其平移到显示区域以外的地方*/
bottom: 0;
overflow-x: hidden;
overflow-y: scroll; /* 允许垂直滚动*/
}
注意:顶层容器使用了overflow隐藏超出部分,内容容器使用了定位的方式向右平移了17个像素,这样就能实现隐藏滚动条的效果 2.使用::-webkit-scrollbar隐藏滚动条$ r. g+ M% a" a
顶层容器允许垂直滚动并使用webkit-scrollbar隐藏滚动条。但是这个方法有很多兼容性问题,尤其是IE浏览器,其他浏览器基本没问题
q$ F5 {- e0 g/ }7 B: E8 ]2 x.container{
width: 100px;
height: 200px;
overflow: auto;
}
/* 隐藏css代码 */
.container::-webkit-scrollbar {
width: 0 !important; /* 设置滚动条的宽度为0或者使用下方代码直接不显示 */
display:none;
}
/*IE 10+*/
.container{
-ms-overflow-style: none;
}
/*Firefox*/
.container{
overflow: -moz-scrollbars-none;
}
|