css3 實現滾動條美化效果的實例代碼
發(fā)布時間：2021-01-06 16:16:09 作者：purple_tastes 
我要評論
我要評論這篇文章主要介紹了css3 實現滾動條美化效果的實例代碼,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
具體代碼如下所示:
/*滾動條的寬度*/
::-webkit-scrollbar {
width:9px;
height:9px;
}
/*外層軌道?？梢杂胐isplay:none讓其不顯示，也可以添加背景圖片，顏色改變顯示效果*/
::-webkit-scrollbar-track {
width: 6px;
background-color:#0d1b20;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius:2em;
}
/*滾動條的設置*/
::-webkit-scrollbar-thumb {
background-color:#606d71;
background-clip:padding-box;
min-height:28px;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius:2em;
}
/*滾動條移上去的背景*/
::-webkit-scrollbar-thumb:hover {
background-color:#fff;
}
CSS
::-webkit-scrollbar { }
::-webkit-scrollbar-button { }
::-webkit-scrollbar-track { }
::-webkit-scrollbar-track-piece { }
::-webkit-scrollbar-thumb { }
::-webkit-scrollbar-corner { }
::-webkit-resizer { }
以上CSS代碼所管轄的區(qū)域對就關系：以上代碼解釋
::-webkit-scrollbar 滾動條整體部分，其中的屬性有width,height,background,border（就和一個塊級元素一樣）等。
::-webkit-scrollbar-button 滾動條兩端的按鈕?？梢杂胐isplay:none讓其不顯示，也可以添加背景圖片，顏色改變顯示效果。
::-webkit-scrollbar-track 外層軌道?？梢杂胐isplay:none讓其不顯示，也可以添加背景圖片，顏色改變顯示效果。
::-webkit-scrollbar-track-piece 內層軌道，滾動條中間部分（除去）。
::-webkit-scrollbar-thumb 滾動條里面可以拖動的那部分
::-webkit-scrollbar-corner 邊角
::-webkit-resizer 定義右下角拖動塊的樣式
到此這篇關于css3 實現滾動條美化效果的實例代碼的文章就介紹到這了,更多相關css3 滾動條美化內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了css實現隱藏滾動條并可以滾動內容的實例代碼,代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-11-03
這篇文章主要介紹了CSS實現導航固定的、左右滑動的滾動條制作方法,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考2020-06-29CSS3自定義滾動條樣式 ::webkit-scrollbar的示例代碼詳解
這篇文章主要介紹了CSS3自定義滾動條樣式 ::webkit-scrollbar的示例代碼，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可2020-06-01- 今天小編給大家分享3種方法實現CSS隱藏滾動條并可以滾動內容，我已經在很多地方使用了非常不錯，需要的朋友參考下吧2020-03-25
- 這篇文章主要介紹了css滾動條樣式修改的代碼,需要的朋友可以參考下2019-10-30
