avatar

目錄
CSS技巧(一)之隐藏滚动条

CSS实现隐藏滚动条的同时还可以滚动的三种方式

1. 前言

平时会遇到很多有关CSS的特殊用法以及技巧,等哪天自己有用到了,就找不到是在哪儿见过,所以在此单独做一分类,专门将它们收藏在一起,方便自己日后翻阅调用…

1.1 关于该篇

该篇总结了纯CSS实现隐藏滚动条的同时又能保持滚动的几种方法,以下三种方法感觉很不错

2. 方法一:

通过 ::-webkit-scrollbar 伪元素

简单粗暴,但是兼容性不好,不兼容IE

css
1
2
3
4
5
6
7
8
9
10
//chrome 和Safari
.inner-container::-webkit-scrollbar {
display: none;//width:0 !impotant;
}

//IE 10+
.inner-container { -ms-overflow-style: none; }

//Firefox
.inner-container { overflow: -moz-scrollbars-none; }

3. 方法二:

外层元素 overflow: hidden, 内层元素absolute定位

兼容性较好,绝对布局不用计算滚动条宽度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// CSS 样式
<style>
.element, .outer-container {
width: 200px;
height: 200px;
}
.outer-container {
position: relative;
overflow: hidden;
}
.inner-container {
position: absolute;
overflow-x: hidden;
overflow-y: scroll;
}
</style>

// html 结构
<div class="outer-container">
<div class="inner-container">
<div class="element">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
...
</div>
</div>
</div>

4. 方法三:

父元素overflow: hidden, 子元素宽度 100% + 滚动条宽度

兼容性好,但是需要计算滚动条的宽度

html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// CSS 样式
<style>
.parent {
width: 200px;
overflow: hidden;
}
.child {
height: 200px;
width: calc(100% + 17px);
overflow: auto;
}
</style>

// html 结构
<div class="parent">
<div class="child">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
...
</div>

5. 总结

  • 以上三种方法其实都很好。方法一好像用过几次,虽然不兼容万恶的IE,但感觉真挺爽的。

该类型的文章篇幅基本都会很小,但是数量会很多,以后会不定期的更新,统一放在《CSS技巧》这一分类中。平时的工作、学习中随时遇到随时记,虽然是很小的知识点,但积少成多,终有一日会水滴石穿~

文章作者: Dylan
文章鏈接: https://www.faithlch.com/CSS%E6%8A%80%E5%B7%A7-%E4%B8%80-%E4%B9%8B%E9%9A%90%E8%97%8F%E6%BB%9A%E5%8A%A8%E6%9D%A1.html
版權聲明: 本博客所有文章除特別聲明外,均採用 CC BY-NC-SA 4.0 許可協議。轉載請註明來自 Dylan He
打賞
  • 微信
    微信
  • 支付寶
    支付寶

評論