Front-end: Modify and set the style of the DIV scroll bar in the webkit kernel browser.

Front-end: Modify and set the style of the DIV scroll bar in the webkit kernel browser.

Modify and set the DIV scroll bar style of webkit kernel Browser

Introduction:

Recently, I am working on my own small project. In order to design a good-looking page, I have to worry about the overall layout of the page, and the scroll bars of the DIV are not missed, the following describes how to modify the webkit kernel browser's scroll bar style.

 

Principle:

The webkit browser css settings scroll bar mainly has the following seven attributes

1.:-webkit-scrollbar: Specifies the overall part of the scroll bar.
2.:-webkit-scrollbar-button buttons at both ends of the scroll bar
3.:-webkit-scrollbar-track outer orbital
4.:-webkit-scrollbar-track-piece inner scroll slot
5.:-webkit-scrollbar-thumb scroll slider
6.:-webkit-scrollbar-corner
7.:-webkit-resizer defines the style of the drag block in the lower right corner.

Examples

 

The following are the main setting attributes of the scroll bar.

: Horizontal scroll bar
: Vertical scroll bar
: Decrement is applied to buttons and the track piece ). It is used to indicate whether the button or the inner track reduces the position of the window (for example, the top of the vertical scroll bar and the left side of the horizontal scroll bar .)
: The increment decrement is similar to that used to indicate whether the button or the inner track will increase the position of the window (for example, below the vertical scroll bar and right of the horizontal scroll bar .)
: The start pseudo class is also applied to buttons and slide. It defines whether an object is placed before the slider.
: End is similar to the start pseudo-class to identify whether the object is placed behind the slider.
: Double-button this pseudo class is used for buttons and inner orbital. Used to determine whether a button is placed in a pair of buttons at the same end of the scroll bar. For an inner orbital, it indicates whether the inner orbital is close to a pair of buttons.
: Single-button is similar to the double-button pseudo class. A button is used to determine whether a button is independent of itself in the scroll bar. For an inner orbital, it indicates whether the inner orbital is close to a single-button.
: No-button is used for the inner orbital to indicate whether the inner orbital must be rolled to the terminal of the scroll bar. For example, when there are no buttons at either side of the scroll bar.
: Corner-present is used for all scroll bar tracks, indicating whether the rounded corner of the scroll bar is displayed.
: Window-inactive is used for all scroll bar tracks to indicate whether a page container (element) of the scroll bar is currently activated. (In the latest version of webkit, this pseudo-class can also be used as the: selection pseudo element. The webkit team has plans to expand it and push it into a standard pseudo class)

　　　

Write an instance demo. CSS is simple.

/* Set the scroll bar style */:-webkit-scrollbar {width: 12px;}/* scroll slot */:: -webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba (0,0, 0, 0.3); border-radius: 10px ;} /* scroll bar slider */:-webkit-scrollbar-thumb {border-radius: 10px; background: rgba (0.1, 0,);-webkit-box-shadow: inset 0 0 6px rgba (0.5, 0, 0.4); }::-webkit-scrollbar-thumb: window-inactive {background: rgba (, 0, 0 );}

　　

IE scroll bar style settings

In IE, there are few custom items, all of which are colors.

1. scrollbar-arrow-color: color;/* arrow color */
2. scrollbar-face-color: color;/* color of the three-dimensional scroll bar (including the background color of the arrow )*/
3. scrollbar-3dlight-color: color;/* color of the bright side of the three-dimensional scroll bar */
4. scrollbar-highlight-color: color;/* The highlighted color of the scroll bar (left shadow ?) */
5. scrollbar-shadow-color: color;/* color of the stereo scroll bar shadow */
6. scrollbar-darkshadow-color: color;/* color of the Shadow outside the three-dimensional scroll bar */
7. scrollbar-track-color: color;/* stereo scroll bar background color */
8. scrollbar-base-color: color;/* base color of the scroll bar */

 

Practice

Effect display:

The following are some scroll bar effects I have implemented on chrome:

 

HTML:

<! DOCTYPE html> 
　　
CSS:
body{background-color: #2f2f2f;}header{font-family: 'Lobster', cursive;text-align: center;font-size: 25px;}#info{font-size: 18px;color: #555;text-align: center;margin-bottom: 25px;}a{color: #074E8C;}.scrollbar{margin-left: 20px;float: left;height: 300px;width: 100px;background: #fff;overflow-y: scroll;margin-bottom: 30px;}.force-overflow{min-height: 450px;}#wrapper{text-align: center;width: 80%;margin: 20px auto;}/* *  STYLE 1 */#style-1::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);border-radius: 10px;background-color: #F5F5F5;}#style-1::-webkit-scrollbar{width: 12px;background-color: #F5F5F5;}#style-1::-webkit-scrollbar-thumb{border-radius: 20px;-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);background-color: #555;}/* *  STYLE 2 */#style-2::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);border-radius: 10px;background-color: #F5F5F5;}#style-2::-webkit-scrollbar{width: 12px;background-color: #F5F5F5;}#style-2::-webkit-scrollbar-thumb{border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);background-color: #D62929;}/* *  STYLE 3 */#style-3::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);background-color: #F5F5F5;}#style-3::-webkit-scrollbar{width: 6px;background-color: #F5F5F5;}#style-3::-webkit-scrollbar-thumb{background-color: #000000;}/* *  STYLE 4 */#style-4::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);background-color: #F5F5F5;}#style-4::-webkit-scrollbar{width: 10px;background-color: #F5F5F5;}#style-4::-webkit-scrollbar-thumb{background-color: #000000;border: 2px solid #555555;}/* *  STYLE 5 */#style-5::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);background-color: #F5F5F5;}#style-5::-webkit-scrollbar{width: 10px;background-color: #F5F5F5;}#style-5::-webkit-scrollbar-thumb{background-color: #0ae;background-image: -webkit-gradient(linear, 0 0, 0 100%,                   color-stop(.5, rgba(255, 255, 255, .2)),   color-stop(.5, transparent), to(transparent));}/* *  STYLE 6 */#style-6::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);background-color: #F5F5F5;}#style-6::-webkit-scrollbar{width: 10px;background-color: #F5F5F5;}#style-6::-webkit-scrollbar-thumb{background-color: #F90;background-image: -webkit-linear-gradient(45deg,                                          rgba(255, 255, 255, .2) 25%,  transparent 25%,  transparent 50%,  rgba(255, 255, 255, .2) 50%,  rgba(255, 255, 255, .2) 75%,  transparent 75%,  transparent)}/* *  STYLE 7 */#style-7::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);background-color: #F5F5F5;border-radius: 10px;}#style-7::-webkit-scrollbar{width: 10px;background-color: #F5F5F5;}#style-7::-webkit-scrollbar-thumb{border-radius: 10px;background-image: -webkit-gradient(linear,   left bottom,   left top,   color-stop(0.44, rgb(122,153,217)),   color-stop(0.72, rgb(73,125,189)),   color-stop(0.86, rgb(28,58,148)));}/* *  STYLE 8 */#style-8::-webkit-scrollbar-track{border: 1px solid black;background-color: #F5F5F5;}#style-8::-webkit-scrollbar{width: 10px;background-color: #F5F5F5;}#style-8::-webkit-scrollbar-thumb{background-color: #000000;}/* *  STYLE 9 */#style-9::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);background-color: #F5F5F5;}#style-9::-webkit-scrollbar{width: 10px;background-color: #F5F5F5;}#style-9::-webkit-scrollbar-thumb{background-color: #F90;background-image: -webkit-linear-gradient(90deg,                                          rgba(255, 255, 255, .2) 25%,  transparent 25%,  transparent 50%,  rgba(255, 255, 255, .2) 50%,  rgba(255, 255, 255, .2) 75%,  transparent 75%,  transparent)}/* *  STYLE 10 */#style-10::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);background-color: #F5F5F5;border-radius: 10px;}#style-10::-webkit-scrollbar{width: 10px;background-color: #F5F5F5;}#style-10::-webkit-scrollbar-thumb{background-color: #AAA;border-radius: 10px;background-image: -webkit-linear-gradient(90deg,                                          rgba(0, 0, 0, .2) 25%,  transparent 25%,  transparent 50%,  rgba(0, 0, 0, .2) 50%,  rgba(0, 0, 0, .2) 75%,  transparent 75%,  transparent)}/* *  STYLE 11 */#style-11::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);background-color: #F5F5F5;border-radius: 10px;}#style-11::-webkit-scrollbar{width: 10px;background-color: #F5F5F5;}#style-11::-webkit-scrollbar-thumb{background-color: #3366FF;border-radius: 10px;background-image: -webkit-linear-gradient(0deg,                                          rgba(255, 255, 255, 0.5) 25%,  transparent 25%,  transparent 50%,  rgba(255, 255, 255, 0.5) 50%,  rgba(255, 255, 255, 0.5) 75%,  transparent 75%,  transparent)}/* *  STYLE 12 */#style-12::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);border-radius: 10px;background-color: #444444;}#style-12::-webkit-scrollbar{width: 12px;background-color: #F5F5F5;}#style-12::-webkit-scrollbar-thumb{border-radius: 10px;background-color: #D62929;background-image: -webkit-linear-gradient(90deg,  transparent,  rgba(0, 0, 0, 0.4) 50%,  transparent,  transparent)}/* *  STYLE 13 */#style-13::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);border-radius: 10px;background-color: #CCCCCC;}#style-13::-webkit-scrollbar{width: 12px;background-color: #F5F5F5;}#style-13::-webkit-scrollbar-thumb{border-radius: 10px;background-color: #D62929;background-image: -webkit-linear-gradient(90deg,  transparent,  rgba(0, 0, 0, 0.4) 50%,  transparent,  transparent)}/* *  STYLE 14 */#style-14::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.6);background-color: #CCCCCC;}#style-14::-webkit-scrollbar{width: 10px;background-color: #F5F5F5;}#style-14::-webkit-scrollbar-thumb{background-color: #FFF;background-image: -webkit-linear-gradient(90deg,                                          rgba(0, 0, 0, 1) 0%,  rgba(0, 0, 0, 1) 25%,  transparent 100%,  rgba(0, 0, 0, 1) 75%,  transparent)}/* *  STYLE 15 */#style-15::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);background-color: #F5F5F5;border-radius: 10px;}#style-15::-webkit-scrollbar{width: 10px;background-color: #F5F5F5;}#style-15::-webkit-scrollbar-thumb{border-radius: 10px;background-color: #FFF;background-image: -webkit-gradient(linear,   40% 0%,   75% 84%,   from(#4D9C41),   to(#19911D),   color-stop(.6,#54DE5D))}/* *  STYLE 16 */#style-16::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);background-color: #F5F5F5;border-radius: 10px;}#style-16::-webkit-scrollbar{width: 10px;background-color: #F5F5F5;}#style-16::-webkit-scrollbar-thumb{border-radius: 10px;background-color: #FFF;background-image: -webkit-linear-gradient(top,  #e4f5fc 0%,  #bfe8f9 50%,  #9fd8ef 51%,  #2ab0ed 100%);}
 
JS:
$(document).ready(function () {    if (!$.browser.webkit) {        $('.wrapper').html('<p>Sorry! Non webkit users. :(</p>');    }});
 
References:
Click to view the original article: CSSSet the scroll bar style