如何使用CSS和JavaScript自定義瀏覽器滾動條

CSS自定義瀏覽器滾動條（WebKit）

CSS自定義滾動條的優缺點

優點：

1. 學習成本低，幾句CSS樣式就能搞定
2. 代碼容易理解

缺點：

1. 兼容性差（只支持內核爲WebKit的瀏覽器，如：Chrome、Opera、360、獵豹、搜狗）

先認識幾個主要CSS屬性：

    ::webkit-scrollbar  --滾動條整體部分
    ::webkit-scrollbar-track  --滾動條軌道
    ::webkit-scrollbar-thumb  --滾動條滑塊

上圖：

好，那麼可能有同學問了：滾動條上下兩端的按鈕呢？
滾動條上下兩端按鈕叫：::webkit-scrollbar-button 一般來說，我們可以設置display:none 使其隱藏。

OK，上代碼！

    <style>
            /*定義滾動條整體寬高及背景*/
            ::-webkit-scrollbar{
                width: 8px;
                height: 8px;
                background-color: #f5f5f5;
            }

            /*定義滾動條的軌道,內陰影及圓角*/
            ::-webkit-scrollbar-track{
                -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
                border-radius: 10px;
                background-color: #f5f5f5;
            }

            /*定義滑塊,內陰影及圓角*/
            ::-webkit-scrollbar-thumb{
                height: 20px;
                border-radius: 10px;
                -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
                background-color: #9D9D9D;
            }
    </style>

效果如下：

沒錯，就是這的簡單粗暴，方便快捷！

本文參考和引用以下文章（表示感謝，如有侵權，立即刪除）：

CSS3自定義滾動條樣式 -webkit-scrollbar
自定義瀏覽器滾動條的樣式，打造屬於你的滾動條風格
JavaScript自定義滾動條
感謝閱讀，轉載或引用請標明鏈接