CSS3自定義滾動條樣式

原文地址：→傳送門

寫在前面

滾動條是個很常見的東東，不過某些瀏覽器自帶的滾動條確實不太好看啊，下面能夠做爲學習，探討下自定義滾動條的實現，這樣你的滾動條就能夠美美的啦。可是，也只能玩玩，由於只針對webkit內核的瀏覽器啊啊啊啊啊！

overflow介紹

定義：overflow 屬性指定當它溢出其塊級容器時,是否剪輯內容，渲染滾動條或顯示內容。

屬性值

overflow:visible    //默認值。內容不會被修剪，超出內容會顯示在元素框以外
overflow:hidden     //內容會被修剪。超出內容被隱藏
overflow:scroll     //內容會被修剪，瀏覽器會顯示滾動條以便查看其他內容
overflow:auto       //若是內容被修剪，則瀏覽器會顯示滾動條以便查看其他的內容。
overflow:inherit     //規定從該父元素繼承overflow屬性的值

注：任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。

當overflow設爲除默認值（visible）之外的值時，將會建立一個會塊級式化上下文（清除浮動的一種方式），更多可查看深刻理解BFC和Margin Collapse

小tips

對於當行文本對超出部分的處理可以使用一下屬性。（同時需設置元素的width值，還有overflow:hidden;及white-space:nowrap;)

text-overflow:clip       //修剪文本。
text-overflow:ellipsis   //顯示省略符號來表明被修剪的文本。
text-overflow:string     //使用給定的字符串來表明被修剪的文本。

對於多行文本則須要用到不規範屬性-webkit-line-clamp，此處不細講。點擊此處參考

水平及垂直滾動條
使用overflow-x和overflow-y可分別設置水平及垂直方向上的滾動條。

自定義滾動條實現

此部分針對webkit內核的瀏覽器，使用僞類來改變滾動條的默認樣式，詳情以下：
滾動條組成部分

1. ::-webkit-scrollbar                滾動條總體部分
2. ::-webkit-scrollbar-thumb          滾動條裏面的小方塊，能向上向下移動（或向左向右移動）
3. ::-webkit-scrollbar-track          滾動條的軌道（裏面裝有Thumb）
4. ::-webkit-scrollbar-button         滾動條的軌道的兩端按鈕，因爲經過點擊微調小方塊的位置。
5. ::-webkit-scrollbar-track-piece    內層軌道，滾動條中間部分
6. ::-webkit-scrollbar-corner         邊角，即垂直滾動條和水平滾動條相交的地方
7. ::-webkit-resizer                  兩個滾動條的交匯處上用於拖動調整元素大小的小控件

滾動條組成結構圖以下：

下面來一組簡單自定義滾動條的實現：

<div class="box box7">
            <p>這個屬性定義溢出元素內容區的內容會如何處理。若是值爲 scroll，不管是否須要， 用戶代理都會提供一種滾動機制。所以，有可能即便元素框中能夠放下全部內容也 會出現滾動條。 這個屬性定義溢出元素內容區的內容會如何處理。若是值爲
                scroll，不管是否須要， 用戶代理都會提供一種滾動機制。所以，有可能即便元素框中能夠放下全部內容也 會出現滾動條。
            </p>
        </div>
        
    
        .box8::-webkit-scrollbar {
            width: 12px;
            background-color: #eee;
        }
        
        .box8::-webkit-scrollbar-track {
            background-color: #eee;
        }
        
        .box8::-webkit-scrollbar-thumb {
            background: #3DB6A4;
        }
        
        .box8::-webkit-scrollbar-button:start {
            background: url(./imgs/up.png) no-repeat;
            background-size: 12px 12px;
        }
        
        .box8::-webkit-scrollbar-button:end {
            background: url(./imgs/down.png) no-repeat;
            background-size: 12px 12px;
        }

更多效果以下圖：

注意只在chrome下有效！！！！！！

源碼地址

預覽地址

小結

• 沒法兼容各大瀏覽器，只能在chrome下耍耍
• 本文僅做參考，更多內容請看參考資料

參考資料

• CSS3自定義滾動條樣式 -webkit-scrollbar
• overflow-MDN