滚动条的隐藏

发表于 更新于
本文字数： 976 阅读时长 ≈ 2 分钟

场景

有的时候，滚动条看起来很丑，可以通过简单的CSS方法可以将它们隐藏。

比如像这样一个html结构：id为“child”的容器，其内容较多，如果他的高度是受限的，就会出现一个垂直的滚动条。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="father">
  <div id="child">
    <p>春江水暖鸭先知</p>
    <p>春江水暖鸭先知</p>
    <p>春江水暖鸭先知</p>
    <p>春江水暖鸭先知</p>
    <p>春江水暖鸭先知</p>
    <p>春江水暖鸭先知</p>
    <p>春江水暖鸭先知</p>
    <p>春江水暖鸭先知</p>
    <p>春江水暖鸭先知</p>
    <p>春江水暖鸭先知</p>
    <p>春江水暖鸭先知</p>
    <p>春江水暖鸭先知</p>
    <p>宣城太守知不知</p>
  </div>
</div>

为了美观，我们不想要这个垂直滚动条，最简洁的处理方法就是给他增加一个父容器father，然后增加样式：

1
2
3
4
5
6
7
8
9
10
11
12
#father {
  width: 100px;
  height: 100px;
  overflow: hidden;
}
#child {
  width: 200px;
  height: 100px;
  padding-right: 100px;
  padding-bottom: 100px;
  overflow: scroll;
}
  • 利用父容器的隐藏溢出，来将滚动条隐藏。
  • 选择设置一个很大的width和padding-right，是为了兼容各种情况（其实就是一个较大的值就行，避免值太小的时候，在屏幕较大的浏览器里显示出来了）。
  • 父容器设置和child同样高度，再给child一个padding-bottom，同时可以避免横向滚动条的出现。

元素大小

两张图说明尺寸问题