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

css怎麼修改捲軸的樣式

青灯夜游
發布: 2023-01-05 16:08:04
原創
13515 人瀏覽過

在CSS中,可以通使用scrollbar-face-color、scrollbar-arrow-color等屬性和「::-webkit-scrollbar」、「::-webkit-scrollbar-thumb」等選擇器來修改捲軸的樣式。

css怎麼修改捲軸的樣式

本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。

CSS設定程式碼:

*{
scrollbar-face-color:#fff;/*滑块颜色*/ 
  scrollbar-arrow-color:#000; /*箭头颜色*/
  scrollbar-shadow-color:#000000; /*滑块边线颜色*/
  scrollbar-track-color:#dde3fa; /*滑轨颜色*/
}
登入後複製

此設定對所有捲軸都有作用。

css怎麼修改捲軸的樣式

為了相容其他瀏覽器還需要做一些功夫。這裡針對webkit瀏覽器做一些設定。同樣我們還是有必要先了解其屬性:

::-webkit-scrollbar{}/*整体设置*/
::-webkit-scrollbar-button :滚动条两端的按钮。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。
::-webkit-scrollbar-track :外层轨道。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。
::-webkit-scrollbar-track-piece :内层轨道,具体区别看下面gif图,需要注意的就是它会覆盖第三个属性的样式。
::-webkit-scrollbar-thumb :滚动条里面可以拖动的那部分
::-webkit-scrollbar-corner :边角,两个滚动条交汇处
::-webkit-resizer :两个滚动条交汇处用于拖动调整元素大小的小控件(基本用不上)
登入後複製

使用偽元素設定CSS。

css怎麼修改捲軸的樣式

繼續加入以下程式碼

::-webkit-scrollbar{background-color: #000}
::-webkit-scrollbar-track {
background-color: #7dc2f6;
} 
::-webkit-scrollbar-thumb {
background-color: #1b99f7;
} 
::-webkit-scrollbar-button {
background-color: #b9e0fd;
} 
::-webkit-scrollbar-corner {
background-color: #018ef8;
}
登入後複製

再次測試輸出,現在IE和穀哥類瀏覽器都能看到變化了。

css怎麼修改捲軸的樣式

(學習影片分享:css影片教學

以上是css怎麼修改捲軸的樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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