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

        還在爲瀏覽器中那醜陋的滾動條煩惱麼？還在爲着想要內容顯示,可是滾動條卻不但願它顯示而煩惱麼？若是你還在煩惱這些,那麼很榮幸的告訴你,哥哥帶你裝逼帶你飛(哈哈，開玩笑而已，哥你別當真)！

        傳統的瀏覽器的滾動條樣式比較難看(固然,你要是可以接受那請忽略這篇文章),項目中產品經理嫌棄滾動條的樣式太難看了(好吧,其實我本身是能接受的,確實我是缺乏美感的前端,這是硬傷啊),好吧,既然如此,那咱們就只能動手搗鼓它了唄。

        咱們先來看一下傳統的瀏覽器滾動條的樣式：

                

        好吧,確實是挺醜的,請原諒個人審美！

        那麼如今,咱們就要來更改一下這麼醜的滾動條了,網上查了不少的資料,發現-webkit-內核的瀏覽器的支持性是最好的,而IE,好吧,它的滾動條自定製功能並非很強大,只能控制各個部分的顏色而已,而火狐方面的話,網上查了不少自定義滾動條的方法,發現倒是不支持的,真心蛋疼。

        首先先來看一下在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-darkshadow-color	IE特有屬性	IE5.5+	Y	設置滾動條槽的顏色
scrollbar-base-color	IE特有屬性	IE5.5+	Y	設置滾動條主要構成部分的顏色
scrollbar-track-color	IE特有屬性	IE5.5+	Y	設置滾動條軌跡組成部分的顏色

        文字敘述的再多,不如上一張圖來的簡單明瞭：

        

        很容易看到各個屬性控制的部分,其中有幾個是控制着相同的部分,可是測試過程當中發現有幾個屬性卻並不能有效果,例如：scrollbar-darkshadow-color，scrollbar-base-color(網上查到資料說當 scrollbar-track-color 和 scrollbar-face-color 未設置時纔開始起效果,可是在IE上卻並無出現效果,本人使用IE11測試,若是你測試成功,方便的話跟我說下,漲知識)，而 scrollbar-shadow-color (按照盒子模型來解釋,就是border區域)，而 scrollbar-arrow-color 則是控制滾動條上下的兩個箭頭的樣式,有一點須要注意的是:在 scrollbar-highlight-color 與 scrollbar-track-color 同時設置不一樣的樣式的時候,IE會使用scrollbar-track-color的樣式！！！

        上述一句話總結就是：IE瀏覽器滾動條的自定製的功能並不算強大,只能改變樣式,然而要作出有個性的滾動條,呵呵！！！！

        測試過程當中發現,在全部瀏覽器中,webkit內核的瀏覽器的滾動條可定製性是最強的,下面,讓咱們一塊兒來看看webkit：

                                                        ::-webkit-scrollbar (1)

                                                        ::-webkit-scrollbar-button (2)

                                                        ::-webkit-scrollbar-track (3)

                                                        ::-webkit-scrollbar-track-piece (4)

                                                        ::-webkit-scrollbar-thumb (5)

        再用一張圖例來看下它們相對應的做用區域：

                        

        畫的有點醜,請重點看做用區域,  ::-webkit-scrollbar 控制整個滾動條, ::-webkit-scrollbar-button 控制滾動條中的上下兩個箭頭,當未設置::-webkit-scrollbar-button時,webkit內核的瀏覽器則會自動忽略掉他們,滾動條中可拖動的那部分能夠置頂或到底，::-webkit-scrollbar-track 控制的是整個滾動區域,::-webkit-scrollbar-track-piece 控制除了滾動條能夠拖動的那部分的區域,::-webkit-scrollbar-thumb 控制可拖動的那部分滾動條區域。而且測試了下,縱向的滾動條,width是有效果的,height是沒有效果的,橫向的滾動條則相反!

        具體效果以下：

                                                    

        上述是幾個主要的屬性幾乎可讓咱們重寫瀏覽器的滾動條了(僅限於webkit內核的),可是webkit還提供了其餘更多的屬性及僞類讓咱們來定製豐富的瀏覽器樣式,這裏就很少作闡述,有興趣的同窗能夠上網百度一下便可！

        具體效果能夠參考本人站點（http://meichao.sinaapp.com/#/index）在IE和webkit下都會有明顯的樣式更改，滾動條的樣式,美感上確實有所提高。網上也查了不少關於火狐自定義滾動條的方法,基本都是插件，其中本人使用的是一個tinyscrollbar插件,不過它是隱藏了滾動條,而後本身使用圖片來模擬滾動條!!!!

      火狐下使用tinyscrollbar插件的效果以下：

                                      

      這裏就只給下效果，具體代碼操做不細講，可網上自行查找資料！