配图源自 Freepik
一、什么时候会出现滚动条？
我们知道，默认情况下，当一个元素的内容大小超过了所在容器的空间大小时，会产生溢出效果，而且溢出部分的内容是可见的。
在 CSS 中，可以使用 overflow 属性对溢出内容做控制，它是 overflow-x 和 overflow-y 的简写属性。其中 overflow 产生效果的前提是：
元素所在的块级容器指定了高度（设置
height或max-height）或将white-space设为nowrap。
取值
| 属性值 | 描述 |
|---|---|
visibile |
默认值，内容不会被修剪，会呈现在容器之外。 |
hidden |
内容会被修剪，并且溢出内容不可见。 |
scroll |
内容会被修剪，浏览器会显示滚动条，滚动可查看溢出内容。 |
auto |
由浏览器定夺，如果内容被修剪，就会显示滚动条。 |
overlay |
行为与 auto 相同，但滚动条绘制在内容之上而不是占用空间。仅被基于 WebKit 内核的浏览器所支持。 |
clip |
行为与 hidden 相同，区别在于它无法通过 DOM API 使得元素滚动（新特性兼容性较差）。 |
由于 overflow 是简写形式，按照规范：
- 如果指定一个值时，
overflow-x和overflow-y都应用相同的值。 - 如果指定两个值时，第一个值应用于
overflow-x，第二个应用于overflow-y。
但是总有不遵循规范的家伙，在 Firefox 63 之前，指定两个值时，刚好与规范相反，前者作用于
overflow-y，后者作用于overflow-x。在后续新版本中顺序已经调整过来，如规范一般。因此，当overflow-x和overflow-y需指定不同的值时，不建议使用简写形式，应分别设置为好。
注意点
- 当一个轴设置了非
visibile的值，即使另外一个轴指定为visibile，它的行为也会变成auto的效果。- 当
overflow指定为非visibile的值，该容器会形成块级格式化上下文（Block Formatting Context，BFC）。- 尽管
overflow: hidden可以隐藏溢出内容，但使用 Element.scrollTop 仍可以用来滚动元素。目前有一个兼容性不好的新特性clip倒是可以解决这种通过 DOM API 滚动的问题。
关于更多 clip 内容，请看文章。
二、如何隐藏滚动条？
在不同浏览器中，隐藏的方式还有点不同，只要在所在的块级容器中，添加以下样式即可。
Chrome、Safari 等基于 WebKit（Blink）内核的浏览器
它使用到 ::-webkit-scrollbar 伪元素，更多请看。
.container::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
color: transparent;
}
FireFox 浏览器
使用到标准的 scrollbar-width 属性，更多请看。
.container {
scrollbar-width: none;
}
IE 浏览器
这货这样处理：
.container {
-ms-overflow-style: none; /* IE 10+ */
}
因此，汇总起来如下兼容处理：
.container {
scrollbar-width: none;
-ms-overflow-style: none;
}
.container::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
color: transparent;
}
其他
关于微信小程序隐藏 <scroll-view> 滚动条（我暂时未遇到这种需求，懒得去实测了），请看这两篇文章：
The end.
