Hello 。。。
資訊專欄INFORMATION COLUMN
摘要：由于種種原因，瀏覽器的默認滾動條衣裳實在是，為了美，本人結合萬維網各大神給的經驗和自己的實踐，做了此篇總結。標識對象是否放到滑塊的后面。該偽類可以用于按鈕和內層軌道。用于所有滾動條軌道，指示滾動條圓角是否顯示。
由于種種原因，瀏覽器的默認滾動條“衣裳”實在是 (ˉ▽￣～)~~，為了“美”，本人結合萬維網各大神給的經驗和自己的實踐，做了此篇總結。若有錯誤，請在評論里給出，我會及時更改。
我在電腦上打開了一些瀏覽器，先觀察一下，其中IE瀏覽器版本（10-5）在我電腦上顯示是一致的，火狐版本為 59.0.2。如下圖（1）可見，除了火狐瀏覽器和Opera瀏覽器的樣式與其他瀏覽器樣式差別較大，其余樣式差別不大，主要是顏色的不同。
不知道為什么我放不上圖片，╭(╯^╰)╮ ε=唉 ！
（一）專屬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 | 設置滾動條軌跡組成部分的顏色 |
?由于放不了圖，各位還是自己直觀試試吧，一下是我的總結：
?1、關于scrollbar-dark-shadow-color屬性，我是在win7系統下測試Edge、IE10、9、8、7、5都沒有顯示什么，包括和其他屬性組合，也沒效果；
?2、這幾個元素的從屬關系：? ?scrollbar-face-color || scrollbar-arrow-color || scrollbar-shadow-color > scrollbar-track-color > scrollbar-highlight-color >scrollbar-base-color > scrollbar-3dlight-color；
?3、scrollbar-3dlight-color不論設置什么顏色，滾動條軌跡組成部分的顏色變為white色,滾動框和滾動條箭頭的顏色變淺灰色 ;
?4、scroll-base-color是一個備用顏色 ,在其他屬性不設置任何顏色時，滾動條顏色為此色，滾動框黑色，滾動軌跡為此色的淺色系，上下箭頭變深接近黑色;
?5、在只設置scrollbar-track-color或者只設置scrollbar-face-color時，上下兩個箭頭的顏色會變得比默認顏色深;
?6、在只設置scrollbar-face-color時候，滾動條軌跡組成部分的顏色變為white色;
?7、在只設置scrollbar-arrow-color時候，滾動條軌跡組成部分的顏色變為white色,滾動框和滾動條箭頭的顏色變淺灰色;
?8、滾動條寬度無法設置，不能設置出弧度等形狀 。?
（二）webkit內核的“衣裳”
擁有webkit內核的瀏覽器差不多都支持下面的css屬性，下邊的偽元素最好放在css文件頂部，方便找。eg:
html：?
css:?
::-webkit-scrollbar { width: 10px; height: 10px; background: #f2f2f2; border: yellowgreen 1px solid; }::-webkit-scrollbar-button { background-color:#267326; }::-webkit-scrollbar-track { background:#9fdf9f; }::-webkit-scrollbar-track-piece { background:url(http://pic.58pic.com/58pic/16/41/00/49F58PICmZg_1024.jpg); }::-webkit-scrollbar-thumb { background:#339933; border-radius: 5px; }::-webkit-scrollbar-corner { background:#ff0000; }::-webkit-resizer { background:#ff0000; }::-webkit-scrollbar-button:horizontal { background-color:#00a3cc; }::-webkit-scrollbar-track:horizontal { background:#b3f0ff; }::-webkit-scrollbar-thumb:vertical { background:#1ad1ff; border-radius: 5px; }::-webkit-scrollbar-thumb:hover { background: #267326; }::-webkit-scrollbar-thumb:active { background: #267326; }::-webkit-scrollbar-thumb:vertical:hover { background: #00a3cc; }::-webkit-scrollbar-thumb:vertical:active { background: #00a3cc; }::-webkit-scrollbar-button:decrement { border: 1px solid #00a3cc; }::-webkit-scrollbar-button:increment { border: 1px solid #267326; }/* ::-webkit-scrollbar-track:corner-present { display: none } *//* ::-webkit-scrollbar-button:start { background-color: blue; }? ? ::-webkit-scrollbar-button:end { background-color: green; } */?.main {? padding: 20px; border: blue 1px dashed;}.box { width: 500px; height: 200px; overflow: scroll;}?.box-ctn { width: 3000px; height: 1000px;}?這些偽元素還可以搭配很多偽類，英文鏈接, 漢文翻譯
:horizontal? ?主要應用于選擇水平方向滾動條，可以多帶帶設置水平方向的樣式
:vertical? ?主要是應用于選擇豎直方向滾動條，可以多帶帶設置垂直方向的樣式:decrement? ?應用于按鈕和內層軌道(track piece)。它用來指示按鈕或者內層軌道是否會減小視窗的位置(比如，垂直滾動條的上面，水平滾動條的左邊。)
:increment? ?用來指示按鈕或內層軌道是否會增大視窗的位置(比如，垂直滾動條的下面和水平滾動條的右邊。)
:start? ?應用于按鈕和滑塊。它用來定義對象是否放到滑塊的前面。:end? ?標識對象是否放到滑塊的后面。
:double-button? ?該偽類可以用于按鈕和內層軌道。用于判斷一個按鈕是不是放在滾動條同一端的一對按鈕中的一個。對于內層軌道來說，它表示內層軌道是否緊靠一對按鈕。
:single-button? ??類似于double-button偽類。對按鈕來說，它用于判斷一個按鈕是否自己獨立的在滾動條的一段。對內層軌道來說，它表示內層軌道是否緊靠一個single-button。
:no-button? ?用于內層軌道，表示內層軌道是否要滾動到滾動條的終端，比如，滾動條兩端沒有按鈕的時候。
:corner-present? ??用于所有滾動條軌道，指示滾動條圓角是否顯示。
:window-inactive? ??用于所有的滾動條軌道，指示應用滾動條的某個頁面容器(元素)是否當前被激活。(在webkit最近的版本中，該偽類也可以用于::selection偽元素。webkit團隊有計劃擴展它并推動成為一個標準的偽類)
:hover? ?鼠標懸浮時的效果
:active? ?被激活時的樣式
:enabled? ? 元素的可用狀態
:disabled? ?元素的禁用狀態
根據偽類可以增加滾動條的樣式以及一些動畫，我最常用的是 :hover、 :active 、:window-inactive，根據需求大家可以多多嘗試。
（三）Firefox的“衣裳”
這件可真是換不下來了
網上給了一些參考，但我試了試，沒弄明白，下面是連接，有興趣的看完會的，若不麻煩留言給個例子吧?
https://bbs.kafan.cn/thread-1529981-1-1.html?
參考文件：?
?小天地，大世界[https://www.lyblog.net]? ?https://www.lyblog.net/detail/314.html
?https://webkit.org/blog/363/styling-scrollbars/
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/2280.html
摘要：子元素固定高寬子元素不定高寬缺點需要設置子元素寬度包括百分比等非固定寬度也可以原理是的縮寫，意為彈性布局，用來為盒狀模型提供最大的靈活性。路途未完，行囊已空衣裳破裂污損，人已精疲力竭。拋棄顏色形狀等干擾代碼實際布局 前言 PS: 這些只是個人學習,僅供思路參考,可能會有缺陷,并且都在chrome中測試,不一定適用其他瀏覽器,而且不考慮IE的,切記!! PS: 2018/03/23修改，...
摘要：子元素固定高寬子元素不定高寬缺點需要設置子元素寬度包括百分比等非固定寬度也可以原理是的縮寫，意為彈性布局，用來為盒狀模型提供最大的靈活性。路途未完，行囊已空衣裳破裂污損，人已精疲力竭。拋棄顏色形狀等干擾代碼實際布局 前言 PS: 這些只是個人學習,僅供思路參考,可能會有缺陷,并且都在chrome中測試,不一定適用其他瀏覽器,而且不考慮IE的,切記!! PS: 2018/03/23修改，...
摘要：需求有的時候我們不想使用瀏覽器默認的滾動條樣式，因為不夠定制化和美觀。可設置豎直水平方向的滾動條可以設置水平方向的滾動條，不加默認是豎直方向。自定義滾動條樣式可自定義的樣式比較少，只能控制滾動條各個部分顯示的顏色，定制性較低。 歡迎大家前往騰訊云+社區，獲取更多騰訊海量技術實踐干貨哦~ 本文由前端林子發表 本文會介紹CSS滾動條選擇器，并在demo中展示如何在Webkit內核瀏覽器和I...
摘要：可設置豎直水平方向的滾動條可以設置水平方向的滾動條，不加默認是豎直方向。自定義滾動條樣式自定義滾動條樣式可自定義的樣式比較少，只能控制滾動條各個部分顯示的顏色，定制性較低。歡迎大家前往騰訊云+社區，獲取更多騰訊海量技術實踐干貨哦~ 本文由前端林子發表 本文會介紹CSS滾動條選擇器，并在demo中展示如何在Webkit內核瀏覽器和IE瀏覽器中，自定義一個橫向以及一個縱向的滾動條。 0.需求...
閱讀 594·2021-11-18 13:12
閱讀 1313·2021-11-15 11:39
閱讀 2473·2021-09-23 11:22
閱讀 6194·2021-09-22 15:15
閱讀 3654·2021-09-02 09:54
閱讀 2310·2019-08-30 11:10
閱讀 3245·2019-08-29 14:13
閱讀 2913·2019-08-29 12:49
