CSS技巧
隐藏滚动条的方式
<div class="outer-container">
<div class="inner-container">
...
</div>
</div>
1
2
3
4
5
2
3
4
5
CSS代码如下，利用绝对定位并使用right设为负值能够将滚动条很好地隐藏起来：
.outer-container {
/* 随意给定的宽高 */
width: 360px;
height: 200px;
position: relative;
overflow: hidden;
background-color: pink;
}
.inner-container {
position: absolute;
left: 0;
top: 0;
right: -17px;
bottom: 0;
overflow-x: hidden;
overflow-y: scroll;
background-color: skyblue;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
如果不考虑桌面端，仅仅使用移动端可以采用以下方式：
/* chrome 和Safari */
.element::-webkit-scrollbar { width: 0 !important }
/* IE 10+ */
.element { -ms-overflow-style: none; }
1
2
3
4
2
3
4