首頁 > 文章 > web前端 > CSS3中如何自訂捲軸樣式

CSS3中如何自訂捲軸樣式

清浅原創: 2018-12-08 10:45:036277瀏覽

CSS3中自訂捲軸樣式的方法：首先建立一個HTML範例檔案；然後透過設定「overflow：scroll」元素來產生捲軸；最後透過設定scrollbar屬性的各個值重新自訂捲動條的樣式即可。

CSS3中如何自訂捲軸樣式

本文操作環境：windows7系統、HTML5&&CSS3版、Dell G3電腦。

CSS3中可以透過給元素設定overflow：scroll產生捲軸，再透過設定scrollbar屬性中的各個值重新自訂捲軸的樣式

在瀏覽器中滾動條是必必不可少的，通常具有獨特的滾動條的網站更加吸引人注目，也使網站看起來與眾不同。自訂捲軸我們可以使用jQuery插件來實現同樣也可以利用CSS3來創建屬於自己的滾動條，接下來在文章中將為大家詳細介紹如何使用CSS3創建自訂滾動條

# #overflow屬性：

主要是設定內容溢位時的樣式（超出是否顯示捲軸）

overflow-x：水平方向內容溢位時的設定

overflow- y：垂直方向內容溢出時的設定

三個屬性設定的值有：visible(預設值)、scroll、hidden、auto。

預設捲軸樣式：

   <style type="text/css">
    .scrollbar {
        background-color: #F5F5F5;
        height: 300px;
        width: 65px;
        margin: 100px auto;
        overflow-y: scroll;//设置滚动条
    }
    .overflow {
        height: 450px;
    }
    </style>
</head>
<body>
    <div class="scrollbar" id="style-1">
        <div class="overflow"></div>
    </div>

【建議課程：CSS3教學】## 效果圖：

CSS3中如何自訂捲軸樣式

scrollbar屬性：

scrollbar-face-color：立體捲軸凸出部分的顏色

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

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

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

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

範例：

 scrollbar-face-color:pink;

效果圖：

CSS3中如何自訂捲軸樣式

自訂捲軸樣式：

-webkit-scrollbar：捲軸整體部分

-webkit-scrollbar-button ：捲軸兩端的按鈕

-webkit-scrollbar-track ：外層軌道
-webkit-scrollbar-track-piece ：內層軌道，捲軸中間部分（除去）
-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;
    }
    /*滚动条区域*/
#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

以上是CSS3中如何自訂捲軸樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！

html5 jquery css3 html webkit auto overflow

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：CSS的媒體類型怎麼使用下一篇：CSS的媒體類型怎麼使用

看更多