實作一個漸變的滾動條

前言

之前寫過一篇scroll-snap讓你的滾動條更智能，在那篇文章中，主要介紹了，使用scroll-snap優化滾動，其實這也隻是滾動需要優化的一點。其實滾動條才是最需要優化的，因為浏覽器的多樣性，各個浏覽器在滾動條的樣式上，也不統一。

當一個網站上線，我們盡可能的需要保證樣式的一緻性，美化滾動條可以解決這個統一的問題，當然了，你一個絢麗的頁面，肯定不想出現醜了吧唧的滾動條吧！

滾動條

包含

滾動條包含下面7個元素:

::-webkit-scrollbar ：整個滾動條
::-webkit-scrollbar-button ：下下箭頭按鈕
::-webkit-scrollbar-thumb ：滾動滑塊
::-webkit-scrollbar-track ：滾動條滑軌
::-webkit-scrollbar-track-piece ：滾動條沒有滑塊的軌道部分
::-webkit-scrollbar-corner ：橫向滾動條與豎向滾動條的交彙處
::-webkit-resizer ：類似 textarea 的可拖動按鈕

位置

在日常的使用中，我們經常見到的是右側+下邊滾動條。其實還有一種滾動條是位于左側。主要是出現在RTL類型的網頁中。

因為中文的書寫方式是LTR 類型，是以滾動條在右邊。

新文法？雞肋

目前新文法，僅支援 scrollbar-color, scrollbar-width.無法自定義其他内容，個人覺得比較雞肋。

div {
    scrollbar-color: rebeccapurple green;
    scrollbar-width: thin;
}
複制代碼

複制

漸變的滾動條

定義滾動條容器

這裡使用兩個div。子div主要是用來保證父div可以出現滾動條。

<div class="scrollbar" id="style-7">
    <div class="child"></div>
</div>
    
複制代碼

複制

父容器高度小于子元素高度：

.scrollbar
        {
          height: 300px;
        }
   .child{
  min-height: 450px;
}
複制代碼

複制

定義整個滾動條

.scrollbar::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
        
複制代碼

複制

定義滑塊漸變

.scrollbar::-webkit-scrollbar-thumb
        {
        border-radius:10px;
          background-image: -webkit-linear-gradient(90deg, #12c2e9, #c471ed, #f64f59);
        }
複制代碼

複制

這裡強烈推薦一個漸變色配色網站，可以生成代碼：uigradients.com/。

滑軌加點圓角

.scrollbar::-webkit-scrollbar-track
        {
            border-radius: 10px;
           }
複制代碼

複制

後記

因為隻是為了解決公司的問題，目前對scrollbar，了解不深，後面感覺得深入了解一下。