1. 程式人生 > >自定義瀏覽器滾動條的樣式,打造屬於你的滾動條風格

自定義瀏覽器滾動條的樣式,打造屬於你的滾動條風格

前段時間,到網上找素材時,看到了一個很個性的滾動條式,開啟Chrome的除錯工具看了一下,發現不是用JavaScript來模擬實現的,覺得有必要折騰一下。於是在各大瀏覽器中對比了一下,發現只用Chrome適用,也就是說這個用的是Chrome的私有CSS屬性。便百之谷之後,發現原來不僅僅只用Chrome,其它的瀏覽器在不同程度上支援自定義滾動條樣式的。下面是我不斷測試的結果,若有錯誤或不全,請在評論裡面給出,我會立馬更正;若有更好的方案,你可以留言,讓大家都開開眼界。。。。。。

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

追溯瀏覽器對滾動條的自定義,恐怕最早的就是IE瀏覽器了(好像最開始支援的版本是IE5.5)。下面列出了多個版本的支援性況:

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

為了有助於理解IE中滾動條樣式的控制,你可以檢視如下的圖片:

ie-css-scroll

以上所寫的幾個四個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屬性控制。

感覺IE瀏覽器滾動條自定製功能並不是很強,只能控制一樣顯示各個部分的顏色而已,像寬度,結構等都無法控制,要靠出個性點的滾動條,很難!很難!!!

自定義FireFox瀏覽器滾動條

在網上找了很多關於Firfox自定義瀏覽器滾動條的方法,發現firefox中卻實是不支援的。發現了幾篇說可以更改,自已也跟著程式碼寫了幾次(不知是我錯了還是。。。),發現卻是不起作用。以下是一點小的收穫:

複製
  1. @-moz-document url-prefix(http://),url-prefix(https://) {
  2. /* 滾動條顏色 */
  3. scrollbar {
  4. -moz-appearance: none !important;
  5. background: rgb(0,255,0)!important;
  6. }
  7. /* 滾動條按鈕顏色 */
  8. thumb,scrollbarbutton {
  9. -moz-appearance: none !important;
  10. background-color: rgb(0,0,255)!important;
  11. }
  12. /* 滑鼠懸停時按鈕顏色 */
  13. thumb:hover,scrollbarbutton:hover {
  14. -moz-appearance: none !important;
  15. background-color: rgb(255,0,0)!important;
  16. }
  17. /* 隱藏上下箭頭 */
  18. scrollbarbutton {
  19. display: none !important;
  20. }
  21. /* 縱向滾動條寬度 */
  22. scrollbar[orient="vertical"]{
  23. min-width:15px!important;
  24. }
  25. }

實測以上程式碼並不起作用。但也可能是我的瀏覽器的版本不對吧!你可以試試,要是有效的話,你可以把你的FF版本發表在文章評論裡面。

下面給兩個關於FF滾動條的討論(你多少web開發者希望FF能夠像webkit核心瀏覽器一樣程度的來支援滾動條自定義):

webkit核心的瀏覽器滾動條定製

在所有瀏覽器,滾動條可定製性最強的當屬webkit核心的瀏覽器了。因為原始碼開放的原因,市面上基於webkit核心的瀏覽器也是很難窮舉完。例如有:Google Chrome、Opera(opera最近宣佈使用webkit核心了)、360極速瀏覽器,獵豹瀏覽器等,搜狗瀏覽器······

下面我們來看一下webkit瀏覽器是如何強大的吧!

複製
  1. CSS
  2. ::-webkit-scrollbar {/* 1 */}
  3. ::-webkit-scrollbar-button {/* 2 */}
  4. ::-webkit-scrollbar-track {/* 3 */}
  5. ::-webkit-scrollbar-track-piece {/* 4 */}
  6. ::-webkit-scrollbar-thumb {/* 5 */}
  7. ::-webkit-scrollbar-corner {/* 6 */}
  8. ::-webkit-resizer {/* 7 */}

以上CSS程式碼所管轄的區域對就關係:以上註釋中的數字與下圖中數字相對應。

上圖正如如下所言:

  • ::-webkit-scrollbar        滾動條整體部分,其中的屬性有width,height,background,border(就和一個塊級元素一樣)等。
  • ::-webkit-scrollbar-button      滾動條兩端的按鈕。可以用display:none讓其不顯示,也可以新增背景圖片,顏色改變顯示效果。
  • ::-webkit-scrollbar-track         外層軌道。可以用display:none讓其不顯示,也可以新增背景圖片,顏色改變顯示效果。
  • ::-webkit-scrollbar-track-piece        內層軌道,滾動條中間部分(除去)。
  • ::-webkit-scrollbar-thumb               滾動條裡面可以拖動的那部分
  • ::-webkit-scrollbar-corner               邊角
  • ::-webkit-resizer                       定義右下角拖動塊的樣式

注意:對以上各個部分定義width,height時。有如下功能:若是水平滾動條,則width屬性不起作用,height屬性用來控制滾動條相應部分豎直方向高度;若是豎直滾動條,則height屬性不起作用,width屬性用來控制相應部分的寬度。

能過上面的不斷的測試。在Chrome中,滾動條中的各個部分和DOM中塊級元素是一樣的。通過::-webkit-scrollbar等就類似於原來所說的CSS中的選擇器。而{}中的屬性,你就像控制一般塊級元素一樣簡單(強大啊)。

請選擇Webkit核心的瀏覽器才可以正常的看到滾動條的變化。小天地,大世界是一個Web前端的技術部落格。 主要是關於HTML 5,CSS 3,JavaScript,JQuery等。除此之外,還包含一些PHP語言等的實用例子。

請選擇Webkit核心的瀏覽器才可以正常的看到滾動條的變化。小天地,大世界是一個Web前端的技術部落格。 主要是關於HTML 5,CSS 3,JavaScript,JQuery等。除此之外,還包含一些PHP語言等的實用例子。

請選擇Webkit核心的瀏覽器才可以正常的看到滾動條的變化。小天地,大世界是一個Web前端的技術部落格。 主要是關於HTML 5,CSS 3,JavaScript,JQuery等。除此之外,還包含一些PHP語言等的實用例子。

請選擇Webkit核心的瀏覽器才可以正常的看到滾動條的變化。小天地,大世界是一個Web前端的技術部落格。 主要是關於HTML 5,CSS 3,JavaScript,JQuery等。除此之外,還包含一些PHP語言等的實用例子。

對應的原始碼如下:

CSS部分程式碼:

複製
  1. #scroll-1 {
  2. width:200px;
  3. height:200px;
  4. overflow:auto;
  5. }
  6. #scroll-1 div {
  7. width:400px;
  8. height:400px;
  9. }#scroll-1::-webkit-scrollbar {
  10. width:10px;
  11. height:10px;
  12. }
  13. #scroll-1::-webkit-scrollbar-button {
  14. background-color:#FF7677;
  15. }
  16. #scroll-1::-webkit-scrollbar-track {
  17. background:#FF66D5;
  18. }
  19. #scroll-1::-webkit-scrollbar-track-piece {
  20. background:url(http://www.lyblog.net/wp/wp-content/themes/mine/img/stripes_tiny_08.png);
  21. }
  22. #scroll-1::-webkit-scrollbar-thumb{
  23. background:#FFA711;
  24. border-radius:4px;
  25. }
  26. #scroll-1::-webkit-scrollbar-corner {
  27. background:#82AFFF;
  28. }
  29. #scroll-1::-webkit-scrollbar-resizer {
  30. background:#FF0BEE;
  31. }

HTML結構:

複製
  1. <divid='scroll-1'>
  2. <div>
  3. <p>請選擇Webkit核心的瀏覽器才可以正常的看到滾動條的變化。
  4. 小天地,大世界是一個Web前端的技術部落格。 主要是關於
  5. HTML 5,CSS 3,JavaScript,JQuery等。除此之外,還
  6. 包含一些PHP語言等的實用例子。</p>
  7. <p>請選擇Webkit核心的瀏覽器才可以正常的看到滾動條的變化。
  8. 小天地,大世界是一個Web前端的技術部落格。 主要是關於
  9. HTML 5,CSS 3,JavaScript,JQuery等。除此之外,還
  10. 包含一些PHP語言等的實用例子。</p>
  11. <p>請選擇Webkit核心的瀏覽器才可以正常的看到滾動條的變化。
  12. 小天地,大世界是一個Web前端的技術部落格。 主要是關於
  13. HTML 5,CSS 3,JavaScript,JQuery等。除此之外,還
  14. 包含一些PHP語言等的實用例子。</p>
  15. <p>請選擇Webkit核心的瀏覽器才可以正常的看到滾動條的變化。
  16. 小天地,大世界是一個Web前端的技術部落格。 主要是關於
  17. HTML 5,CSS 3,JavaScript,JQuery等。除此之外,還
  18. 包含一些PHP語言等的實用例子。</p>
  19. <p>請選擇Webkit核心的瀏覽器才可以正常的看到滾動條的變化。
  20. 小天地,大世界是一個Web前端的技術部落格。 主要是關於
  21. HTML 5,CSS 3,JavaScript,JQuery等。除此之外,還
  22. 包含一些PHP語言等的實用例子。</p>
  23. </div>
  24. </div>
  • :horizontal     horizontal  偽類,主要應用於選擇水平方向滾動條。
  • :vertical    vertical偽類主要是應用於選擇豎直方向滾動條
  • :decrement    decrement偽類應用於按鈕和內層軌道(track piece)。它用來指示按鈕或者內層軌道是否會減小視窗的位置(比如,垂直滾動條的上面,水平滾動條的左邊。)
  • :increment     increment偽類與和decrement類似,用來指示按鈕或內層軌道是否會增大視窗的位置(比如,垂直滾動條的下面和水平滾動條的右邊。)
  • :start    start偽類也應用於按鈕和滑塊。它用來定義物件是否放到滑塊的前面。
  • :end     類似於start偽類,標識物件是否放到滑塊的後面。
  • :double-button    該偽類可以用於按鈕和內層軌道。用於判斷一個按鈕是不是放在滾動條同一端的一對按鈕中的一個。對於內層軌道來說,它表示內層軌道是否緊靠一對按鈕。
  • :single-button    類似於double-button偽類。對按鈕來說,它用於判斷一個按鈕是否自己獨立的在滾動條的一段。對內層軌道來說,它表示內層軌道是否緊靠一個single-button。
  • :no-button    用於內層軌道,表示內層軌道是否要滾動到滾動條的終端,比如,滾動條兩端沒有按鈕的時候。
  • :corner-present    用於所有滾動條軌道,指示滾動條圓角是否顯示。
  • :window-inactive    用於所有的滾動條軌道,指示應用滾動條的某個頁面容器(元素)是否當前被啟用。(在webkit最近的版本中,該偽類也可以用於::selection偽元素。webkit團隊有計劃擴充套件它並推動成為一個標準的偽類)

另外,:enabled、:disabled、:hover、和:active等偽類同樣在滾動條中適用。

下面我自已嘗試著去寫的DEMO,不要嫌它太醜就好。

三國平分,終歸一統

為了一致的使用者體驗,有時我們就不得不放棄使用部分瀏覽器提供的CSS介面來定製滾動條,轉而尋求更佳的代替方案。

其中的一中方案是使用jQuery外掛,jquery-custom-content-scroller。使用外掛的好處是顯而易見的,但是壞處也多得去了。要是您想了解jQuery-custom-content-scroller的具體使用方法,請移步到:http://manos.malihu.gr/jquery-custom-content-scroller/

下面我就jQuery滾動條外掛的使用作一下簡單介紹:

第一步:在內容的頂部引入滾動條相應的樣式表文件和jquery的庫檔案,jquery外掛jquery.mcustomscrollbar檔案。程式碼如下:

複製
  1. <linkrel="stylesheet"type="text/css"href="jquery.mCustomScrollbar.css">
  2. <scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  3. <scriptsrc="jquery.mCustomScrollbar.concat.min.js"></script>

第二步:在要顯示滾動條的元素(元素內容中必須要有溢位的塊,否則就不會出現滾動條)上面,加入class="content",然後再加入以下程式碼:

複製
  1. <script>
  2. (function($){
  3. $(window).load(function(){
  4. $(".content").mCustomScrollbar();
  5. });
  6. })(jQuery);
  7. </script>

關於此外掛的詳細介紹,你可以訪問官網,裡面講的相當詳細,我就不再此多贅述。