Hello 。。。
資訊專欄INFORMATION COLUMN
摘要：由于種種原因，瀏覽器的默認(rèn)滾動條衣裳實(shí)在是，為了美，本人結(jié)合萬維網(wǎng)各大神給的經(jīng)驗(yàn)和自己的實(shí)踐，做了此篇總結(jié)。標(biāo)識對象是否放到滑塊的后面。該偽類可以用于按鈕和內(nèi)層軌道。用于所有滾動條軌道，指示滾動條圓角是否顯示。
由于種種原因，瀏覽器的默認(rèn)滾動條“衣裳”實(shí)在是 (ˉ▽￣～)~~，為了“美”，本人結(jié)合萬維網(wǎng)各大神給的經(jīng)驗(yàn)和自己的實(shí)踐，做了此篇總結(jié)。若有錯(cuò)誤，請?jiān)谠u論里給出，我會及時(shí)更改。
我在電腦上打開了一些瀏覽器，先觀察一下，其中IE瀏覽器版本（10-5）在我電腦上顯示是一致的，火狐版本為 59.0.2。如下圖（1）可見，除了火狐瀏覽器和Opera瀏覽器的樣式與其他瀏覽器樣式差別較大，其余樣式差別不大，主要是顏色的不同。
不知道為什么我放不上圖片，╭(╯^╰)╮ ε=唉 ！
（一）專屬IE的“衣裳”
網(wǎng)上找到一個(gè)不錯(cuò)的分享，我自己在總結(jié)下，內(nèi)容原網(wǎng)址
| 滾動條樣式 | 支持情況 | 支持瀏覽器版本 | 可否繼承 | 描述 |
|---|---|---|---|---|
| scrollbar-3dlight-color | IE特有屬性 | IE5.5+ | y | 設(shè)置滾動框的和滾動條箭頭左上邊緣的顏色 |
| scrollbar-highlight-color | IE特有屬性 | IE5.5+ | y | 設(shè)置滾動框的和滾動條箭頭左上邊緣的顏色 |
| scrollbar-face-color | IE特有屬性 | IE5.5+ | y | 設(shè)置滾動框和滾動條箭頭的顏色 |
| scrollbar-arrow-color | IE特有屬性 | IE5.5+ | y | 設(shè)置滾動條箭頭的顏色 |
| scrollbar-shadow-color | IE特有屬性 | IE5.5+ | y | 設(shè)置滾動框的和滾動條箭頭右下邊緣的顏色 |
| scrollbar-dark-shadow-color | IE特有屬性 | IE5.5+ | y | 設(shè)置滾動條槽的顏色 |
| scrollbar-base-color | IE特有屬性 | IE5.5+ | y | 設(shè)置滾動條主要構(gòu)成部分的顏色 |
| scrollbar-track-color | IE特有屬性 | IE5.5+ | y | 設(shè)置滾動條軌跡組成部分的顏色 |
?由于放不了圖，各位還是自己直觀試試吧，一下是我的總結(jié)：
?1、關(guān)于scrollbar-dark-shadow-color屬性，我是在win7系統(tǒng)下測試Edge、IE10、9、8、7、5都沒有顯示什么，包括和其他屬性組合，也沒效果；
?2、這幾個(gè)元素的從屬關(guān)系：? ?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不論設(shè)置什么顏色，滾動條軌跡組成部分的顏色變?yōu)閣hite色,滾動框和滾動條箭頭的顏色變淺灰色 ;
?4、scroll-base-color是一個(gè)備用顏色 ,在其他屬性不設(shè)置任何顏色時(shí)，滾動條顏色為此色，滾動框黑色，滾動軌跡為此色的淺色系，上下箭頭變深接近黑色;
?5、在只設(shè)置scrollbar-track-color或者只設(shè)置scrollbar-face-color時(shí)，上下兩個(gè)箭頭的顏色會變得比默認(rèn)顏色深;
?6、在只設(shè)置scrollbar-face-color時(shí)候，滾動條軌跡組成部分的顏色變?yōu)閣hite色;
?7、在只設(shè)置scrollbar-arrow-color時(shí)候，滾動條軌跡組成部分的顏色變?yōu)閣hite色,滾動框和滾動條箭頭的顏色變淺灰色;
?8、滾動條寬度無法設(shè)置，不能設(shè)置出弧度等形狀 。?
（二）webkit內(nèi)核的“衣裳”
擁有webkit內(nèi)核的瀏覽器差不多都支持下面的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? ?主要應(yīng)用于選擇水平方向滾動條，可以多帶帶設(shè)置水平方向的樣式
:vertical? ?主要是應(yīng)用于選擇豎直方向滾動條，可以多帶帶設(shè)置垂直方向的樣式:decrement? ?應(yīng)用于按鈕和內(nèi)層軌道(track piece)。它用來指示按鈕或者內(nèi)層軌道是否會減小視窗的位置(比如，垂直滾動條的上面，水平滾動條的左邊。)
:increment? ?用來指示按鈕或內(nèi)層軌道是否會增大視窗的位置(比如，垂直滾動條的下面和水平滾動條的右邊。)
:start? ?應(yīng)用于按鈕和滑塊。它用來定義對象是否放到滑塊的前面。:end? ?標(biāo)識對象是否放到滑塊的后面。
:double-button? ?該偽類可以用于按鈕和內(nèi)層軌道。用于判斷一個(gè)按鈕是不是放在滾動條同一端的一對按鈕中的一個(gè)。對于內(nèi)層軌道來說，它表示內(nèi)層軌道是否緊靠一對按鈕。
:single-button? ??類似于double-button偽類。對按鈕來說，它用于判斷一個(gè)按鈕是否自己獨(dú)立的在滾動條的一段。對內(nèi)層軌道來說，它表示內(nèi)層軌道是否緊靠一個(gè)single-button。
:no-button? ?用于內(nèi)層軌道，表示內(nèi)層軌道是否要滾動到滾動條的終端，比如，滾動條兩端沒有按鈕的時(shí)候。
:corner-present? ??用于所有滾動條軌道，指示滾動條圓角是否顯示。
:window-inactive? ??用于所有的滾動條軌道，指示應(yīng)用滾動條的某個(gè)頁面容器(元素)是否當(dāng)前被激活。(在webkit最近的版本中，該偽類也可以用于::selection偽元素。webkit團(tuán)隊(duì)有計(jì)劃擴(kuò)展它并推動成為一個(gè)標(biāo)準(zhǔn)的偽類)
:hover? ?鼠標(biāo)懸浮時(shí)的效果
:active? ?被激活時(shí)的樣式
:enabled? ? 元素的可用狀態(tài)
:disabled? ?元素的禁用狀態(tài)
根據(jù)偽類可以增加滾動條的樣式以及一些動畫，我最常用的是 :hover、 :active 、:window-inactive，根據(jù)需求大家可以多多嘗試。
（三）Firefox的“衣裳”
這件可真是換不下來了
網(wǎng)上給了一些參考，但我試了試，沒弄明白，下面是連接，有興趣的看完會的，若不麻煩留言給個(gè)例子吧?
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/
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/2280.html
摘要：子元素固定高寬子元素不定高寬缺點(diǎn)需要設(shè)置子元素寬度包括百分比等非固定寬度也可以原理是的縮寫，意為彈性布局，用來為盒狀模型提供最大的靈活性。路途未完，行囊已空衣裳破裂污損，人已精疲力竭。拋棄顏色形狀等干擾代碼實(shí)際布局 前言 PS: 這些只是個(gè)人學(xué)習(xí),僅供思路參考,可能會有缺陷,并且都在chrome中測試,不一定適用其他瀏覽器,而且不考慮IE的,切記!! PS: 2018/03/23修改，...
摘要：子元素固定高寬子元素不定高寬缺點(diǎn)需要設(shè)置子元素寬度包括百分比等非固定寬度也可以原理是的縮寫，意為彈性布局，用來為盒狀模型提供最大的靈活性。路途未完，行囊已空衣裳破裂污損，人已精疲力竭。拋棄顏色形狀等干擾代碼實(shí)際布局 前言 PS: 這些只是個(gè)人學(xué)習(xí),僅供思路參考,可能會有缺陷,并且都在chrome中測試,不一定適用其他瀏覽器,而且不考慮IE的,切記!! PS: 2018/03/23修改，...
摘要：需求有的時(shí)候我們不想使用瀏覽器默認(rèn)的滾動條樣式，因?yàn)椴粔蚨ㄖ苹兔烙^?？稍O(shè)置豎直水平方向的滾動條可以設(shè)置水平方向的滾動條，不加默認(rèn)是豎直方向。自定義滾動條樣式可自定義的樣式比較少，只能控制滾動條各個(gè)部分顯示的顏色，定制性較低。 歡迎大家前往騰訊云+社區(qū)，獲取更多騰訊海量技術(shù)實(shí)踐干貨哦~ 本文由前端林子發(fā)表 本文會介紹CSS滾動條選擇器，并在demo中展示如何在Webkit內(nèi)核瀏覽器和I...
摘要：可設(shè)置豎直水平方向的滾動條可以設(shè)置水平方向的滾動條，不加默認(rèn)是豎直方向。自定義滾動條樣式自定義滾動條樣式可自定義的樣式比較少，只能控制滾動條各個(gè)部分顯示的顏色，定制性較低。歡迎大家前往騰訊云+社區(qū)，獲取更多騰訊海量技術(shù)實(shí)踐干貨哦~ 本文由前端林子發(fā)表 本文會介紹CSS滾動條選擇器，并在demo中展示如何在Webkit內(nèi)核瀏覽器和IE瀏覽器中，自定義一個(gè)橫向以及一個(gè)縱向的滾動條。 0.需求...
閱讀 654·2021-11-18 13:12
閱讀 1394·2021-11-15 11:39
閱讀 2544·2021-09-23 11:22
閱讀 6295·2021-09-22 15:15
閱讀 3728·2021-09-02 09:54
閱讀 2377·2019-08-30 11:10
閱讀 3312·2019-08-29 14:13
閱讀 2965·2019-08-29 12:49
