CSS 隐藏滚动条总结

2022-05-19 本文已影响0人越前君

配图源自 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.