iT邦幫忙

2023 iThome 鐵人賽

DAY 21
0
Modern Web

你應該要知道的CSS技巧:發掘被忽略但實用的屬性系列 第 21

【Day21】讓你的滾動條更符合你的品牌形象 - CSS Scrollbar Styling

  • 分享至 

  • xImage
  •  

CSS scroll-Styling

CSS Scroll-Styling支援度:Can I Use)

CSS Scroll-Styling是什麼?

  • CSS Scrollbars標準化了由IE 5廢棄的滾動條顏色屬性。
屬性
scrollbar-width auto系統默認的滾動條寬度;thin系統提供的細滾動條寬度,比預設滾動條窄;none不顯示滾動條,但依然可以滾動。
scrollbar-color auto系統默認的滾動條顏色;<color> <color>自定義滾動條顏色,第一個顏色值是scroll thumb的顏色,第二個顏色值是scroll track的顏色值。

2023/10/06實測已目前的資源度只有Firefox可以看到這個效果,希望未來可以瀏覽器支援度可以提高,這樣屬性就更直覺可以寫出。

參考來源


上一篇
【Day20】流暢滾動的魔法 - CSS scroll-snap
下一篇
【Day22】單用CSS就可以做Slider!? - CSS Slider
系列文
你應該要知道的CSS技巧:發掘被忽略但實用的屬性30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言