css

css隐藏滚动条

有的时候我们需要在一个宽度较小的情况下实现滚动，但是由于电脑端滚动条自身会占据一定的宽度，实际可视范围很可能非常小，这时就需要隐藏滚动条了。

1. 使用::-webkit-scrollbar隐藏(Chrome&Safari限定)

对于Chrome和Safari浏览器，可以直接调整元素滚动条的样式：

1
2
3
.scrollBox::-webkit-scrollbar {
    display: none;
}

2. 通用隐藏滚动条方法

那对于其他浏览器有没有应用方法呢？有的，只要在滚动的盒子外再套一个限制宽高的溢出隐藏盒子就好。

1
2
3
4
5
6
<div class="wrap">
    <ul class="scrollBox">
        <li>...</li>
        <li>...</li>
    </ul>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.wrap {
    position: relative;
    width: 100px;
    height: 200px;
    overflow: hidden;
}
.scrollBox {
    position: absolute;
    left: 0;
    top: 0;
    width: 117px;
    /* 滚动条的宽度大约是17px */
    height: 200px;
    overflow: auto;
}
li {
    width: 100px;
    height: 500px;
}