Customize the style of your browser scroll bar to create your own scroll bar style

Some time ago, to the Internet to find material, saw a very personality of the scroll bar, open chrome Debugging tools to look at, found not with JavaScript to simulate the implementation, feel the need to toss a bit. So in the big browser contrast, found only with chrome, that is, this is Chrome's private CSS properties. After the Hundred Valley, found that the original is not only chrome, other browsers to varying degrees of support for the custom scroll bar style. Here are the results of my ongoing testing, if there are errors or incomplete, please give in the comments, I will immediately correct, if there is a better solution, you can leave a message, so that everyone open horizons ...

Custom IE browser scrollbar style

Trace the browser to the scroll bar customization, I am afraid that the earliest is IE browser (as if the first supported version is IE5.5). The following lists the supported conditions for multiple versions:

scroll bar style	Support Situation	Browser version supported	can inherit	Description
Scrollbar-3dlight-color	IE Specific properties	ie5.5+	Y	Sets the color of the top left edge of the scroll box and scroll bar arrows
Scrollbar-highlight-color	IE Specific properties	ie5.5+	Y	Sets the color of the top left edge of the scroll box and scroll bar arrows
Scrollbar-face-color	IE Specific properties	ie5.5+	Y	Set the color of the scroll box and scroll bar arrows
Scrollbar-arrow-color	IE Specific properties	ie5.5+	Y	Set the color of the scroll bar arrows
Scrollbar-shadow-color	IE Specific properties	ie5.5+	Y	Sets the color of the scroll box and the lower-right edge of the scroll bar arrow
Scrollbar-dark-shadow-color	IE Specific properties	ie5.5+	Y	Set the color of the scroll bar slot
Scrollbar-base-color	IE Specific properties	ie5.5+	Y	Sets the color of the main component of the scrollbar
Scrollbar-track-color	IE Specific properties	ie5.5+	Y	Set the color of the scroll bar track component

To help you understand the control of the scroll bar style in IE, you can view the following images:

After constant testing, there are some styles that play the same role under WIN8. It is estimated that the rolling bar in the system has been redefined because of the flat interface design in Win8! The following is the scroll bar style under win 8, and writes out the case with CSS support:

Several of the four CSS properties written above are sufficient to control the scroll bar style of IE browser under the win 8 system. However, after testing, it was found that the other four properties were still supported (which would have been the case when several of these attributes were vacant). Specific as follows:

1. About Scrollbar-track-color,scrollbar-face-color and Scrollbar-base-color. If you look at the English words directly, you may understand that Scroll-base-color is a spare color, as long as the first two are not set, it will start to work. But you should be aware that when Scrollbar-base-color is used for scrollbar-track-color functions, you will find that the actual color is lighter than the set color. I don't believe you can try this: just set the scrollbar-base-color to see the effect of the scrollbar.
2. With regard to the Scrollbar-dark-shadow-color property, the test found that the Ie10,ie11 scroll bar in Win 8 did not change. May be the win 8 scroll bar redefined, resulting in the absence of hidden shadow! (Personal conjecture only)
3. By observing we found that the background color behind the up and down arrows in the scroll bar under Win 8 has been detached from the Scroll-face-color and is controlled from the Scroll-track-color property.

I feel IE browser scroll bar self-customization function is not very strong, can only control the same display the color of each part, such as width, structure and so can not control, to rely on the personality point of the scroll bar, difficult! Hard!!!

Customizing the Firefox browser scroll bar

On the internet to find a lot of Firfox custom browser scroll bar method, found in Firefox is not really support. Found a few said can change, self also followed the code a few times (I do not know that I was wrong or ...) ), and found that it did not work. Here's a little bit of harvest:

@-moz-document Url-prefix (HTTP//), Url-prefix (https://) {/       * scroll bar color */      scrollbar {          -moz-appearance:none! important;          Background:rgb (0,255,0)!important;       }       /* scroll bar button color */      Thumb,scrollbarbutton {          -moz-appearance:none!important;          Background-color:rgb (0,0,255)!important;       }       /* button color on mouse hover */            thumb:hover,scrollbarbutton:hover {          -moz-appearance:none!important;          Background-color:rgb (255,0,0)!important;       }       /* Hide up/down arrows */      Scrollbarbutton {          display:none!important;       }       /* Longitudinal scrollbar width */      scrollbar[orient= "vertical"] {         min-width:15px!important;       }   }

Measuring the above code does not work. But it could be the wrong version of my browser! You can try it, and if it works, you can post your FF version in the article comments.

Here are two discussions about the FF ScrollBar (how many Web developers want FF to be able to support scroll bar customization as much as the WebKit kernel browser):

• https://bugzilla.mozilla.org/show_bug.cgi?id=547260
• https://bugzilla.mozilla.org/show_bug.cgi?id=77790

WebKit kernel browser scroll bar customization

In all browsers, the most customizable scroll bar is the browser of the WebKit kernel. Because of the source code open reason, the market based on the WebKit kernel browser is also very difficult to lift up. For example: Google Chrome, Opera (opera recently announced the use of the WebKit kernel),  speed browser, Cheetah browser, etc., Sogou browser ...

Let's take a look at how powerful the WebKit browser is!

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

The area pair that the above CSS code governs is the relationship: the numbers in the comments above correspond to the numbers in.

As stated below:

• ::-webkit-scrollbar        The whole portion of the scrollbar, where the properties are Width,height,background, Border (just like a block-level element).
• ::-webkit-scrollbar-button      The buttons at both ends of the scrollbar. You can use Display:none to let it not display, you can also add a background image, color change the display effect. The
• ::-webkit-scrollbar-track         outer track. You can use Display:none to let it not display, you can also add a background image, color change the display effect.
• ::-webkit-scrollbar-track-piece        The inner track, the middle part of the scroll bar (except).
• ::-webkit-scrollbar-thumb                the part of the scroll bar that you can drag
• ::-webkit-scrollbar-corner                Corner
• ::-webkit-resizer                        define the style of the drag block in the lower-right corner

Note: When defining width,height for each of these sections. Like the following function: If the horizontal scrollbar, the Width property does not work, the Height property is used to control the corresponding portion of the scrollbar vertical direction height, if the vertical scroll bar, the Height property does not work, the Width property is used to control the corresponding portion of the widths.

To be able to get through the above constant test. In Chrome, the sections in the scroll bar are the same as the block-level elements in the DOM. By:-webkit-scrollbar and so on is similar to the original said CSS in the selector. And the properties in {}, you're as simple as controlling a block-level element (powerful AH).

The corresponding source code is as follows:

CSS Part code:

#scroll-1 {        width:200px;        height:200px;        Overflow:auto;    }    #scroll-1 div {        width:400px;        height:400px;    }    #scroll -1::-webkit-scrollbar {        width:10px;        height:10px;    }    #scroll -1::-webkit-scrollbar-button    {        background-color: #FF7677;    }    #scroll -1::-webkit-scrollbar-track     {        background: #FF66D5;    }    #scroll -1::-webkit-scrollbar-track-piece {        Background:url (http://www.lyblog.net/wp/wp-content/themes/mine/ img/stripes_tiny_08.png);    }    #scroll -1::-webkit-scrollbar-thumb{        background: #FFA711;        border-radius:4px;    }    #scroll -1::-webkit-scrollbar-corner {        background: #82AFFF;    }    #scroll -1::-webkit-scrollbar-resizer  {        background: #FF0BEE;    }

HTML structure:

<div id= ' scroll-1 ' > <div > <p> Please select the WebKit kernel browser to see the scroll bar changes normally. World is a web front-end technology blog. It is mainly about HTML 5,css 3,javascript,jquery and so on. In addition, there are some practical examples of PHP languages.                </p> <p> Please select the WebKit kernel browser to see the scroll bar changes normally. World is a web front-end technology blog. It is mainly about HTML 5,css 3,javascript,jquery and so on. In addition, there are some practical examples of PHP languages.                </p> <p> Please select the WebKit kernel browser to see the scroll bar changes normally. World is a web front-end technology blog. It is mainly about HTML 5,css 3,javascript,jquery and so on. In addition, there are some practical examples of PHP languages.                </p> <p> Please select the WebKit kernel browser to see the scroll bar changes normally. World is a web front-end technology blog. It is mainly about HTML 5,css 3,javascript,jquery and so on. In addition, there are some practical examples of PHP languages.                </p> <p> Please select the WebKit kernel browser to see the scroll bar changes normally. World is a web front-end technology blog. It is mainly about HTML 5,css 3,javascript,jquery and so on. In addition, there are some practical examples of PHP languages.     </p>   </div> </div> 

With the above, we can almost rewrite the scroll bar of the site, but WebKit provides more pseudo-classes that can be customized to enrich the scroll bar style. This document is referenced in the following sections: https://www.webkit.org/blog/363/styling-scrollbars/

• : Horizontal horizontal pseudo-class, mainly used to select horizontal direction scroll bar.
• : Vertical vertical Pseudo-class is mainly used to select the vertical scroll bar
• :d ecrement Decrement pseudo class is applied to button and inner tracks (track piece). It is used to indicate whether the button or inner track will reduce the position of the window (for example, the top of the vertical scroll bar, the left side of the horizontal scrollbar). )
• : Increment increment pseudo class is similar to decrement to indicate whether a button or inner track will increase the position of the viewport (for example, the bottom of the vertical scrollbar and the right side of the horizontal scrollbar). )
• : The start start pseudo-class is also applied to buttons and sliders. It is used to define whether the object is placed in front of the slider.
• : End is similar to the start pseudo class, which identifies whether the object is placed behind the slider.
• :d Ouble-button the pseudo-class can be used for buttons and inner tracks. Used to determine if a button is one of a pair of buttons placed on the same side of the ScrollBar. For an inner track, it indicates whether the inner track is close to a pair of buttons.
• : Single-button similar to Double-button pseudo class. For a button, it is used to determine whether a button is independent of a section of the scrollbar. In the inner layer, it indicates whether the inner track is close to a single-button.
• : The No-button is used for inner tracks, indicating whether the inner track is to be scrolled to the end of the scrollbar, for example, when there are no buttons at both ends of the scroll bar.
• : The corner-present is used for all scroll bar tracks, indicating whether the scrollbar fillet is displayed.
• : The window-inactive is used for all scrollbar tracks, indicating whether a page container (element) that applies the scroll bar is currently active. (in the recent version of WebKit, this pseudo-class can also be used for:: Selection pseudo-elements.) The WebKit team has plans to extend it and push it into a standard pseudo-Class)

In addition,: enabled,:d isabled,: hover, and: pseudo-classes such as active are also applicable in the scroll bar.

See these pseudo-class, how also did not understand what meaning, or have to write to try. Practice is the truth! You can click on the link below to the official demo demo (feel you can learn a lot of things): http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/ Overflow-scrollbar-combinations.html

The Three Kingdoms are equally unified

For a consistent user experience, sometimes we have to abandon the CSS interface provided by some browsers to customize the scroll bar, instead of looking for better alternatives.

One of the scenarios is to use the jquery plugin, Jquery-custom-content-scroller. The benefits of using plugins are obvious, but there are many drawbacks. If you want to know the specific use of jquery-custom-content-scroller, please go to: http://manos.malihu.gr/jquery-custom-content-scroller/

Let me give you a brief introduction to the use of the jquery scroll bar plugin:

The first step: introduce the corresponding style sheet file and jquery library file to the top of the content, jquery plugin Jquery.mcustomscrollbar file. The code is as follows:

<link rel= "stylesheet" type= "Text/css" href= "jquery.mCustomScrollbar.css" ><script src= "/http/ Ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js "></script><script src=" Jquery.mCustomScrollbar.concat.min.js "></script>

Step two: In the element where you want to display the scrollbar (there must be an overflow block in the element's content, otherwise there will be no scroll bars) above, joinclass="content", and then add the following code:

<script>    (function ($) {        $ (window). Load (function () {            $ (". Content"). Mcustomscrollbar ();        });    }) (jQuery);</script>

About this plug-in details, you can visit the official website, which is quite detailed, I will not repeat this more.

Original articles, reproduced please specify the source: World, Big World [http://www.lyblog.net]
Article Address: http://www.lyblog.net/detail/314.html

Customize the style of your browser scroll bar to create your own scroll bar style