配圖源自 Freepik

一、什么時候會出現(xiàn)滾動條？

我們知道，默認(rèn)情況下，當(dāng)一個元素的內(nèi)容大小超過了所在容器的空間大小時，會產(chǎn)生溢出效果，而且溢出部分的內(nèi)容是可見的。

在 CSS 中，可以使用 overflow 屬性對溢出內(nèi)容做控制，它是 overflow-x 和 overflow-y 的簡寫屬性。其中 overflow 產(chǎn)生效果的前提是：

元素所在的塊級容器指定了高度（設(shè)置 height 或 max-height）或?qū)?white-space 設(shè)為 nowrap。

取值

由于 overflow 是簡寫形式，按照規(guī)范：

• 如果指定一個值時，overflow-x 和 overflow-y 都應(yīng)用相同的值。
• 如果指定兩個值時，第一個值應(yīng)用于 overflow-x，第二個應(yīng)用于 overflow-y。

但是總有不遵循規(guī)范的家伙，在 Firefox 63 之前，指定兩個值時，剛好與規(guī)范相反，前者作用于 overflow-y，后者作用于 overflow-x。在后續(xù)新版本中順序已經(jīng)調(diào)整過來，如規(guī)范一般。因此，當(dāng) overflow-x 和 overflow-y 需指定不同的值時，不建議使用簡寫形式，應(yīng)分別設(shè)置為好。

注意點

1. 當(dāng)一個軸設(shè)置了非 visibile 的值，即使另外一個軸指定為 visibile，它的行為也會變成 auto 的效果。
2. 當(dāng) overflow 指定為非 visibile 的值，該容器會形成塊級格式化上下文（Block Formatting Context，BFC）。
3. 盡管 overflow: hidden 可以隱藏溢出內(nèi)容，但使用 Element.scrollTop 仍可以用來滾動元素。目前有一個兼容性不好的新特性 clip 倒是可以解決這種通過 DOM API 滾動的問題。

關(guān)于更多 clip 內(nèi)容，請看文章。

二、如何隱藏滾動條？

在不同瀏覽器中，隱藏的方式還有點不同，只要在所在的塊級容器中，添加以下樣式即可。

Chrome、Safari 等基于 WebKit（Blink）內(nèi)核的瀏覽器

它使用到 ::-webkit-scrollbar 偽元素，更多請看。

.container::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
}

FireFox 瀏覽器

使用到標(biāo)準(zhǔn)的 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;
}

其他

關(guān)于微信小程序隱藏 <scroll-view> 滾動條（我暫時未遇到這種需求，懶得去實測了），請看這兩篇文章：

• 微信小程序 -- 去掉 scroll-view 滾動條（測試有效）
• 小程序如何隱藏滾動條

The end.