自定義IE瀏覽器滾動條樣式


 

滾動條樣式 支持情況 支持瀏覽器版本 可否繼承 描述
scrollbar-3dlight-color IE特有屬性 IE5.5+ y 設置滾動框的和滾動條箭頭左上邊緣的顏色
scrollbar-highlight-color IE特有屬性 IE5.5+ y 設置滾動框的和滾動條箭頭左上邊緣的顏色
scrollbar-face-color IE特有屬性 IE5.5+ y 設置滾動框和滾動條箭頭的顏色
scrollbar-arrow-color IE特有屬性 IE5.5+ y 設置滾動條箭頭的顏色
scrollbar-shadow-color IE特有屬性 IE5.5+ y 設置滾動框的和滾動條箭頭右下邊緣的顏色
scrollbar-dark-shadow-color IE特有屬性 IE5.5+ y 設置滾動條槽的顏色
scrollbar-base-color IE特有屬性 IE5.5+ y 設置滾動條主要構成部分的顏色
scrollbar-track-color IE特有屬性 IE5.5+ y 設置滾動條軌跡組成部分的顏色

經過不斷的測試發現,在Win8 下面,有一部分樣式都起着相同的作用。估計是因為在Win8中扁平化的界面設計而重新定議了系統中滾動條!以下是Win 8下面的滾動條樣式,並寫出了和CSS支持的情況:

win-8--ie---scrollbar

以上所寫的幾個四個CSS屬性,足以控制Win 8系統下,IE瀏覽器的滾動條樣式了。但經過測試,發現,其它的四個屬性仍然支持(主要是在以上幾個屬性空缺時,就會體現其作用)。具體如下:

  1. 關於scrollbar-track-color,scrollbar-face-color與scrollbar-base-color。直接看英語單詞,你就也許能明白scroll-base-color是一個備用顏色,只要前兩者未設置時,它就開始起作用了。但是你得注意,當scrollbar-base-color用來作scrollbar-track-color功能來用時,你會發現,實際顏色與設定的顏色要淡一點。不信你可以這樣試試:只設置一下scrollbar-base-color看看滾動條的效果。
  2. 關於scrollbar-dark-shadow-color屬性,通過測試發現Win 8下IE10,IE11滾動條並沒有改變。可能是win 8的滾動條重新定義了,導致沒有了隱影了吧!(僅個人猜想)
  3. 通過觀察我們發現,Win 8下的滾動條中,上箭頭和下箭頭后面的背景顏色都已經從scroll-face-color中脫離出來了,從屬於scroll-track-color屬性控制。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM