CSS3中如何自定義滾動條樣式

來源：九壹網(wǎng)

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

在瀏覽器中滾動條是必不可少的，通常具有獨特的滾動條的網(wǎng)站更加吸引人注目，也使網(wǎng)站看起來與眾不同。自定義滾動條我們可以使用jQuery插件來實現(xiàn)同樣也可以利用CSS3來創(chuàng)建屬于自己的滾動條，接下來在文章中將為大家詳細(xì)介紹如何使用CSS3創(chuàng)建自定義滾動條

【推薦課程：CSS3教程】

overflow屬性：

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

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

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

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

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

效果圖：

scrollbar屬性：

scrollbar-face-color：立體滾動條凸出部分的顏色

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

scrollbar-highlight-color：滾動條空白部分的顏色

scrollbar-shadow-color：立體滾動條邊框的顏色

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

例：

 scrollbar-face-color:pink;

效果圖：

自定義滾動條樣式：

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

例：

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

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

}
/*滾動條外層軌道*/
#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>

效果圖：

Image 3.jpg

總結(jié)：

成熟丰满熟妇高潮XXXXX,人妻无码AV中文系列久久兔费 ,国产精品一国产精品,国精品午夜福利视频不卡麻豆

CSS3中如何自定義滾動條樣式