眾所周知，Windows和macOS?的滾動條在默認(rèn)情況是不一致的，最顯著的區(qū)別就是 macOS滾動條是不占據(jù)屏幕尺寸的，如下：

macOS滾動條

而Windows下是這樣的：

windows滾動條

很多設(shè)計師會吐槽Windows?滾動條不太美觀，能不能自定義成macOS那樣呢？

當(dāng)然也是可以的！一起看看吧!

一、自定義滾動條外觀

考慮到桌面端現(xiàn)在已經(jīng)是-webkit-?的天下了，以下自定義均以chrome為例：

自定義滾動條需要用到兩個關(guān)鍵的偽元素::-webkit-scrollbar和::-webkit-scrollbar-thumb。

• ::-webkit-scrollbar滾動容器樣式
• ::-webkit-scrollbar-thumb滑塊樣式

https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar[1]。

下面是windows下的滾動條：

滾動條相關(guān)偽元素

有了這兩個偽元素，自定義樣式就很方便了。現(xiàn)在我們需要將滾動條的背景去除，滑塊修改成半透明的圓角矩形。

::-webkit-scrollbar{
  background-color: transparent;
}
::-webkit-scrollbar-thumb{
  background-color: transparent;
  border-radius: 8px;
}

效果如下：

自定義滾動條

是不是和macOS的差異有點大？沒關(guān)系，下面繼續(xù)優(yōu)化：

二、滑塊與滾動容器之間的間距

macOS的滾動滑塊并不是緊貼邊緣的，它與滾動容器直接還有間隙。

macOS滾動條的間隙

那么，如何留出一點點間隙呢？

嘗試了一些方法，比如給滾動容器添加內(nèi)邊距，或者給滑塊添加外邊距。

::-webkit-scrollbar{
  padding: 2px;
}
::-webkit-scrollbar-thumb{
  margin: 2px;
}

由于滾動條的特殊性，這些方式都不起作用。

后來發(fā)現(xiàn)，邊框是生效的，比如給滑塊添加一個border。

::-webkit-scrollbar-thumb{
  border: 2px solid red;
}

效果如下：

添加border的效果

既然這樣就好辦了，把邊框設(shè)置成透明不就行了嗎，由于是透明，默認(rèn)情況下背景會覆蓋到邊框，所以還需要設(shè)置背景作用區(qū)域（background-clip）。

::-webkit-scrollbar-thumb{
  border: 2px solid transparent;
  background-clip: content-box;
}

效果如下：

透明邊框配合background-clip的效果

三、將滾動條懸浮在內(nèi)容之上

還有一個比較重要的特性沒有實現(xiàn)，那就是滾動條的位置。macOS?的滾動類似于懸浮在內(nèi)容之上，不占據(jù)任何頁面空間，那么，Windows可以做到嗎？當(dāng)然也是可以的，而且非常容易，只需要一個屬性。

body{
  overflow: overlay; /*滾動條會覆蓋在頁面之上*/
}

下面看對比效果：

overlay效果對比

是不是看著非常像MacOS了？

四、滾動時才出現(xiàn)

macOS滾動條還有一個特性，就默認(rèn)情況下是不可見的，只有滾動時才可見，一旦停止就又消失了，如下：

滾動才出現(xiàn)

是否正在滾動就沒法用CSS?進行判斷了，需要借助點js?的力量，原理很簡單，滾動的時候給body?添加一個屬性scroll?屬性，然后延遲500ms后移除，如果繼續(xù)滾動就取消計時器，代碼如下：

window.addEventListener('scroll', function() {
  document.body.toggleAttribute('scroll', true)
  this.timer && clearTimeout(this.timer)
  this.timer = setTimeout(() => {
    document.body.toggleAttribute('scroll')
  }, 500)
})

然后配合一點CSS：

::-webkit-scrollbar-thumb{
  /*其他樣式*/
  background-color: transparent;
}

body[scroll]::-webkit-scrollbar-thumb
  background-color: rgba(0,0,0,.5);
}

現(xiàn)在再看看效果：

windows下的滾動效果

是不是非常接近macOS的效果了？

不過還有個小遺憾，滾動條上不支持過渡和動畫，如下：

::-webkit-scrollbar-thumb{
  transition: .3s;/*并不生效*/
}

也就是想達(dá)到macOS?下那種“淡出”的效果，僅憑 CSS是做不到的，當(dāng)然這也并不是大問題，可以忽略

下面是完整代碼：

body{
  margin: 0;
  overflow: overlay;
}
::-webkit-scrollbar{
  background-color: transparent;
  width: 12px;
}
::-webkit-scrollbar-thumb{
  background-color: transparent;
  border-radius: 8px;
  background-clip: content-box;
  border: 2px solid transparent;
}
body[scroll]::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:hover{
  background-color: rgba(0,0,0,.5);
}

window.addEventListener('scroll', function(ev) {
  document.body.toggleAttribute('scroll', true)
  this.timer && clearTimeout(this.timer)
  this.timer = setTimeout(() => {
    document.body.toggleAttribute('scroll')
  }, 500)
})

你也可以訪問在線 demo：macOS scrollbar (codepen.io)[2]或者 macOS scrollbar(juejin.cn)[3] 或者macOS scrollbar (gitee.io)[4]。

五、總結(jié)和說明

以上就是自定義滾動全部小技巧了，你學(xué)會了嗎？下面總結(jié)一下：

• Windows和macOS?默認(rèn)滾動條不一致，很多設(shè)計師覺得Windows不太美觀，有必要自定義。
• 自定義滾動條主要借助兩個關(guān)鍵的偽元素::-webkit-scrollbar和::-webkit-scrollbar-thumb。
• 滾動滑塊和滾動容器之間的間隙可以通過border和backgrpound-clip實現(xiàn)。
• 給滾動容器設(shè)置overflow: overlay，可以將滾動條懸浮于內(nèi)容之上。
• 滾動時出現(xiàn)需要借助js定時器，延遲控制狀態(tài)

另外，有同學(xué)問fierfox?怎么辦呢？沒關(guān)系，不用管它，桌面端早已是Chrome?的天下了，占比超過70%?，還有一點，這是個視覺體驗的優(yōu)化，即使firefox不支持也不影響滾動條功能，有什么理由不去使用呢？