CSS3中自定義滾動(dòng)條樣式的方法

發(fā)布時(shí)間：2020-08-29 11:00:59 來源：億速云閱讀：195 作者：小新欄目：web開發(fā)

這篇文章主要介紹CSS3中自定義滾動(dòng)條樣式的方法，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

CSS3中可以通過給元素設(shè)置overflow：scroll生成滾動(dòng)條，再通過設(shè)置scrollbar屬性中的各個(gè)值重新自定義滾動(dòng)條的樣式

在瀏覽器中滾動(dòng)條是必不可少的，通常具有獨(dú)特的滾動(dòng)條的網(wǎng)站更加吸引人注目，也使網(wǎng)站看起來與眾不同。自定義滾動(dòng)條我們可以使用jQuery插件來實(shí)現(xiàn)同樣也可以利用CSS3來創(chuàng)建屬于自己的滾動(dòng)條。

overflow屬性：

主要是設(shè)置內(nèi)容溢出時(shí)的樣式（超出是否顯示滾動(dòng)條）
overflow-x：水平方向內(nèi)容溢出時(shí)的設(shè)置

overflow-y：垂直方向內(nèi)容溢出時(shí)的設(shè)置

三個(gè)屬性設(shè)置的值有：visible(默認(rèn)值)、scroll、hidden、auto。

默認(rèn)滾動(dòng)條樣式：

   <style type="text/css">
    .scrollbar {
        background-color: #F5F5F5;
        height: 300px;
        width: 65px;
        margin: 100px auto;
        overflow-y: scroll;//設(shè)置滾動(dòng)條
    }
    .overflow {
        height: 450px;
    }
    </style>
</head>
<body>
    <div class="scrollbar" id="style-1">
        <div class="overflow"></div>
    </div>

效果圖：

CSS3中自定義滾動(dòng)條樣式的方法

scrollbar屬性：

scrollbar-face-color：立體滾動(dòng)條凸出部分的顏色

scrollbar-arrow-color上下按鈕上三角箭頭的顏色

scrollbar-highlight-color：滾動(dòng)條空白部分的顏色

scrollbar-shadow-color：立體滾動(dòng)條邊框的顏色

注意：這些屬性僅支持在IE瀏覽器下

例：

 scrollbar-face-color:pink;

效果圖：

CSS3中自定義滾動(dòng)條樣式的方法

自定義滾動(dòng)條樣式：

-webkit-scrollbar：滾動(dòng)條整體部分
-webkit-scrollbar-button ：滾動(dòng)條兩端的按鈕
-webkit-scrollbar-track ：外層軌道
-webkit-scrollbar-track-piece ：內(nèi)層軌道，滾動(dòng)條中間部分（除去）
-webkit-scrollbar-thumb：拖動(dòng)條
-webkit-scrollbar-corner：邊角
-webkit-resizer ：定義右下角拖動(dòng)塊的樣式

例：

<style type="text/css">
    .scrollbar {
        background-color: #F5F5F5;
        height: 300px;
        width: 65px;
        margin: 100px auto;
        overflow-y: scroll;

    }
    .overflow {
        height: 450px;
    }
    /*滾動(dòng)條區(qū)域*/
#demo::-webkit-scrollbar{
  width:20px;
  background-color:#fff;
}
     /*滾動(dòng)條*/
#demo::-webkit-scrollbar-thumb{
  background-color:#f196c4b3;

}
/*滾動(dòng)條外層軌道*/
#demo::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 1px ;
    background-color:pink;
    border-radius: 10px;
}
    </style>
}

</head>
<body>
    <div class="scrollbar" id="demo">
        <div class="overflow"></div>
    </div>
</body>

效果圖：

CSS3中自定義滾動(dòng)條樣式的方法

以上是CSS3中自定義滾動(dòng)條樣式的方法的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

CSS3中自定義滾動(dòng)條樣式的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽