首頁 > web前端 > css教學 > 主體

CSS3如何使用webkit-scrollbar屬性自訂捲軸樣式的實例

黄舟
發布: 2017-07-21 14:19:21
原創
3836 人瀏覽過

CSS3自訂捲軸樣式-webkit-scrollbar

#有時候覺得瀏覽器自帶的原始捲軸不是很美觀,那webkit瀏覽器是如何自訂捲軸的呢?

Webkit支援擁有overflow屬性的區域,列錶框,下拉選單,textarea的捲軸自訂樣式。當然,相容於所有瀏覽器的捲軸樣式目前是不存在的。

捲軸的組成:

::-webkit-scrollbar         滚动条整体部分
 ::-webkit-scrollbar-thumb             滚动条里面的小方块,能上下左右移动(取决于是垂直滚动条还是水平滚动条)
 ::-webkit-scrollbar-track      滚动条的轨道(里面装有thumb)
 ::-webkit-scrollbar-button      滚动条轨道两端的按钮,允许通过点击微调小方块的位置
 ::-webkit-scrollbar-track-piece    内层轨道,滚动条中间部分(除去)
 ::-webkit-scrollbar-corner     边角,及两个滚动条的交汇处
 ::-webkit-resizer       两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
登入後複製

#自訂捲軸簡單版:

/*定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸*/
.scrollbar::-webkit-scrollbar{    
width: 16px;    
height: 16px;    
background-color: #f5f5f5;
}
/*定义滚动条的轨道,内阴影及圆角*/
.scrollbar::-webkit-scrollbar-track{    
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);    
border-radius: 10px;    
background-color: #f5f5f5;}
/*定义滑块,内阴影及圆角*/
.scrollbar::-webkit-scrollbar-thumb{    
/*width: 10px;*/    
height: 20px;    
border-radius: 10px;    
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);    
background-color: #555;
}
登入後複製

自訂捲軸效果圖:


以上是CSS3如何使用webkit-scrollbar屬性自訂捲軸樣式的實例的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板